Kex Kex - 3 years ago 112
CSS Question

Collapse 3 columns on mobile device

I have a bootstrap layout like so:



<div class="container">
<div class="row">
<div class="col-sm-4 top-col-left">
<h4>24 Hour High</h4>
<h1>$7.88</h1>
</div>
<div class="col-sm-4 top-col-center">
<h4>24 Hour Low</h4>
<h1>$1.88</h1>
</div>
<div class="col-sm-4 top-col-right">
<h4>24 Hour Change</h4>
<h1>$2.88</h1>
</div>
</div>
</div>





When viewed on a mobile device the layout will become 3 rows of one column. Is it possible to display this as 1 row of 2 columns and 1 row of 1 column instead?

Answer Source

This will become 2 rows with 2 and 1 columns respectively on xs (<768px) devices

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-xs-6 top-col-left">
      <h4>24 Hour High</h4>
      <h1>$7.88</h1>
    </div>
    <div class="col-sm-4 col-xs-6 top-col-center">
      <h4>24 Hour Low</h4>
      <h1>$1.88</h1>
    </div>
    <div class="col-sm-4 col-xs-12 top-col-right">
      <h4>24 Hour Change</h4>
      <h1>$2.88</h1>
    </div>
  </div>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download