CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Danny Santos
Danny Santos

Reputation: 1160

Responsive, alternating divs with CSS and Bootstrap's grid system

I am attempting to create a pattern of two divs, side by side, repeating vertically. One side is to contain an image (which I've done using CSS background image) and the other text. The side which contains the image alternates each row.

The divs use the Bootstrap grid's col-sm-6 class. It looks great on desktop but I'm having trouble getting it to look good on smaller devices.

The issue is that because of the order in which the code is written, when it collapses down to 100% width on mobile it goes: image text text image image text

instead of: image text image text image text

The only workaround I've thought of so far is to have two of each image div, one before and one after the text div, and to hide or display them based on the size of the screen. Not a great solution though. Any thoughts?

Upvotes: 0

Views: 713

Answers (2)

Danny Santos
Danny Santos

Reputation: 1160

In the end I put them all in the same order and then went with this:

.campaign-idea:nth-child(odd) {
  .image {
    float: right;
  }
}

Upvotes: 0

reza
reza

Reputation: 1507

put your content like following

<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>

This will give you what you want

Upvotes: 0

Related Questions