title: Bootstrap - What is wrong with this code?
body: <p>Using bootstrap classes, I want that every element has a width of 100% by Desktop and tablet view but 50% by Mobile view.
  But I don't understand why it doesn't work as it should.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-12"&gt;
  
      &lt;div class="panel"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
           some text
          &lt;/div&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;span class="text"&gt;Accordion with image and text&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>.panel {
    display: flex;
    padding: 20px 10px;
    border: 1px solid #000;
    align-items: center;
  
    div {
      outline: 1px solid red;
    }
  
  }
  </code></pre>
  
  <p>The result looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/gP87X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gP87X.png" alt="enter image description here"></a></p>
  
  <p>What is wrong with my code?</p>