Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery / Twitter Bootstrap

Swap The Positions Of Grids Which Are Side By Side To Top And Bottom Using Bootstrap

Post a Comment
I have two divs(content and an image) which are side by side in medium screens. col-md-6(content) col-md-4(image) So, when the screen size is changed to small screens and xs scr

Solution 1:

If you can't pull and push them for xs and sm, you need just swap them in the code and use pull-push for md:

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><divclass="container"><divclass="row"><divclass="col-md-4 col-md-push-6"><imgsrc="//placehold.it/200x150"class="img-fluid"></div><divclass="col-md-6 col-md-pull-4"><p>Content comes here</p></div></div></div>

Solution 2:

make grid of 12 for small devices.

IMAGE

CONTENT`

<divclass="container"><divclass="row"><divclass="col-lg-6 col-md-6 col-sm-12 col-xs-12">
   IMAGE 
</div><divclass="col-lg-6 col-md-6 col-sm-12 col-xs-12">
   CONTENT
</div></div>

`

Solution 3:

I got your expectation, you can add more custom css: 

.custom-row {
        display: flex;
        flex-direction: column;
      }

      .custom-row.img {
        order: 1;
      }

      .custom-row.content {
        order: 2;
      }

      @media (min-width: 992px) {
        .custom-row {
          display: block;
        }

      }


<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><metaname="description"content=""><metaname="author"content=""><linkrel="icon"href="favicon.ico"><title>Grid Template for Bootstrap</title><style>.custom-row {
        display: flex;
        flex-direction: column;
      }

      .custom-row.img {
        order: 1;
      }

      .custom-row.content {
        order: 2;
      }

      @media (min-width: 992px) {
        .custom-row {
          display: block;
        }

      }
    </style><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"></head><body><divclass="container"><divclass="row custom-row"><divclass="col-md-4 col-xs-12 content"><h1>Bootstrap grid examples</h1><pclass="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p></div><divclass="col-md-4 col-xs-12 img"><imgsrc="http://www.navipedia.net/images/a/a9/Example.jpg"alt="Example"></div></div></div><!-- /container --></body></html>

Solution 4:

use pull-right and pull-left classes. it should work

<divclass="container"><divclass="row"><divclass="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right">
   Content 
</div><divclass="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left">
   image
</div></div>

Post a Comment for "Swap The Positions Of Grids Which Are Side By Side To Top And Bottom Using Bootstrap"