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

February 09, 2023 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:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-md-4 col-md-push-6"><img src="//placehold.it/200x150" class="img-fluid"></div>
      <div class="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`

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

Baca Juga

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>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="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 -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="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 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row custom-row">
        <div class="col-md-4 col-xs-12 content">
          <h1>Bootstrap grid examples</h1>
          <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
        </div>
        <div class="col-md-4 col-xs-12 img">
          <img src="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

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

Html5 Academy

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

Solution 1:

Solution 2:

Solution 3:

Solution 4:

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