ppgking ppgking - 4 months ago 17
HTML Question

How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

The code below shows 3 images per row for desktops. When viewed on a mobile phone it shows 2 images, then 1, then 2, then 1, then 2, etc.

How can I make it when mobile to have 4 rows of 2, and still keep the 3 rows of 3 for desktop?

Thanks

<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src="" alt="text"></img>
</div>
<div class="col-xs-6 col-md-4">
<img class="images img-responsive" src=""></img>
</div>
</div>

Answer

Use the following format

(container)
  row
    col-md-4 col-xs-6
    col-md-4 col-xs-6
    ...(6x)

The columns will wrap below each other, so on medium views, you'll get 3 columns in a row, and on mobile views, 2 columns in a row.

If the trailing columns bother you, just add the classes col-xs-offset-3 and col-md-offset-2 (for example). The offsets will changed based on view. You can image this offset as an "invisible" column placed before the first in that new row.