Horizontally Stacking Divs In Same Order With Bootstrap Grid System When Div Order Alternates

I have a Bootstrap (v4.1.3) grid system where I have text and an image in a 50/50 column orientation. Every alternating row reverses the order of the text/img for viewing aesthetic

Solution 1:

For a repeating pattern, ou will need to create an extra mediaquerie that match with the col-sm rule :

example

@media screen and (max-width:576px) {/* make sure you did not modify the sm brakpoint in your bootstrap configuration , else update this mediaquerie to the same breakpoint value */.row:nth-child(odd) .col-sm:nth-child(1) {order:2;}
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"rel="stylesheet"/><divclass="container"><divclass="row"><divclass="col-sm col-xs-12 my-text-col">
            Text Content
        </div><divclass="col-sm col-xs-12 my-img-col">
            Image Content
        </div></div><divclass="row"><divclass="col-sm col-xs-12 my-img-col">
            Image Content
        </div><divclass="col-sm col-xs-12 my-text-col">
            Text Content
        </div></div></div>

---

With the latest version of bootstrap, order class do have the break point rules option

it could be :

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"rel="stylesheet"/><divclass="container"><divclass="row"><divclass="col-sm col-xs-12 my-text-col">
            Text Content
        </div><divclass="col-sm col-xs-12 my-img-col">
            Image Content
        </div></div><divclass="row"><divclass="col-sm col-xs-12 my-img-col  order-2 order-sm-1 ">
            Image Content
        </div><divclass="col-sm col-xs-12 my-text-col  order-sm-2">
            Text Content
        </div></div></div>

You will need to add the class to each rows supposed to reorder . if you need a repeating pattern, nth-child(n) option might be easier to handle.

Solution 2:

You are able to change the order of columns for different view ports using order-* class.

<divclass="row"><divclass="col-sm col-xs-12 my-text-col order-1">
        Text Content
    </div><divclass="col-sm col-xs-12 my-img-col order-2">
        Image Content
    </div></div><divclass="row"><divclass="col-sm col-xs-12 my-img-col order-12 order-sm-1">
        Image Content
    </div><divclass="col-sm col-xs-12 my-text-col order-2">
        Text Content
    </div></div>

Please read more about it here https://getbootstrap.com/docs/4.1/layout/grid/#reordering