What is the best way to arrange divs in Bootstrap 4?

Question

What is the best way to arrange divs in Bootstrap 4?

Is there a way to reorder two divs that are next to each other in a row on mobile? I want the right side div (col-md-9) to be displayed first.

I attempted using flex ordering, but unfortunately it caused layout issues throughout my site.

<div class="row">
   <div class="col-md-3">Left side</div>
   <div class="col-md-9">Right side, displayed first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

When viewing the site on mobile or tablet, I specifically want the col-md-9 div to be the first one shown.

html css bootstrap-4

Answer 1

Answer №1

@media screen and (max-width: 767px) {
  .col-md-3 {
    order: 2;
  }
  .col-md-9 {
    order: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-3">Left side</div>
  <div class="col-md-9">Right side, but first on mobile or tablet</div>
  <div class="clearfix"></div>
</div>

Answer 2

@media screen and (max-width: 767px) {
  .col-md-3 {
    order: 2;
  }
  .col-md-9 {
    order: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-3">Left side</div>
  <div class="col-md-9">Right side, but first on mobile or tablet</div>
  <div class="clearfix"></div>
</div>

Answer 3

Answer №2

If you want to reverse the order of a row, you can do so by adding a specific class. Below is an example code snippet for you to try:

<div class="row flex-row-reverse">
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="col-md-3">Left side</div>
   <div class="clearfix"></div>
</div>

Answer 4

If you want to reverse the order of a row, you can do so by adding a specific class. Below is an example code snippet for you to try:

<div class="row flex-row-reverse">
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="col-md-3">Left side</div>
   <div class="clearfix"></div>
</div>

Answer 5

Answer №3

Simply utilize the order property.

@media only screen and (max-width: 760px) {
  .col-md-3 {
 order:2;
  }
}

@media only screen and (max-width: 760px) {
  .col-md-3 {
 order:2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
   <div class="col-md-3">Left side</div>
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

Answer 6

Simply utilize the order property.

@media only screen and (max-width: 760px) {
  .col-md-3 {
 order:2;
  }
}

@media only screen and (max-width: 760px) {
  .col-md-3 {
 order:2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
   <div class="col-md-3">Left side</div>
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

Answer 7

Answer №4

Utilize Column Ordering to achieve this.

col-md-push-6 will move the column 6 spaces to the right, while col-md-pull-6 will shift it 6 spaces to the left on medium viewports and above. On smaller viewports, the columns return to their regular order.

The reason for confusion is that in your HTML code, B needs to be placed above A. There might be another method to arrange them where A comes before B in the HTML, but I'm not certain about how to execute it...

Check out Code Example

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

Viewport size greater than or equal to md

|A|B|

Viewport size less than md

|B|
|A|

Answer 8

Utilize Column Ordering to achieve this.

col-md-push-6 will move the column 6 spaces to the right, while col-md-pull-6 will shift it 6 spaces to the left on medium viewports and above. On smaller viewports, the columns return to their regular order.

The reason for confusion is that in your HTML code, B needs to be placed above A. There might be another method to arrange them where A comes before B in the HTML, but I'm not certain about how to execute it...

Check out Code Example

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

Viewport size greater than or equal to md

|A|B|

Viewport size less than md

|B|
|A|

Answer 9

Answer №5

Utilize the power of flex and order with the following example:

If this is causing issues across all sites, consider creating a custom class and applying CSS accordingly.

@media screen and (max-width: 531px) {
    .row { display: flex; flex-direction: column; }
    .two { order: 1; }
    .one { order: 2 }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row">
   <div class="col-md-3 one">Left side</div>
   <div class="col-md-9 two">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

Answer 10

Utilize the power of flex and order with the following example:

If this is causing issues across all sites, consider creating a custom class and applying CSS accordingly.

@media screen and (max-width: 531px) {
    .row { display: flex; flex-direction: column; }
    .two { order: 1; }
    .one { order: 2 }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row">
   <div class="col-md-3 one">Left side</div>
   <div class="col-md-9 two">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

What is the best way to arrange divs in Bootstrap 4?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Recommendation for a reliable and user-friendly chat platform without the need for third-party involvement

The bootstrap navbar dropdown feature isn't functioning properly on iPhones

HTML5 document type declarations

Safari iOS does not display any background for Buttons

Exploring Web Scraping Through Dual System Security

Is there a way to assign the scroll event context to `document.body` instead of `window`?

Verify if the textbox is empty

The animation feature in Angular JS seems to be malfunctioning

Showing a PDF file within a Bootstrap modal

Obtaining the chosen value from a bootstrap dropdown button

Eliminating the 'white-space' surrounding concealed images

The upper spacing is malfunctioning

Utilizing Bootstrap Columns for Image Alignment: Struggling to Position an Image in the Center

Retrieving checkbox values from a MySQL database in HTML/PHP

Best placement for <img> tag in HTML for creating a background image using CSS (excluding CSS3)

The functionality of the "#Next" and "#Prev" features in the Tiny carousel are currently not functioning properly within the MVC project

Tips for creating a responsive <tr> table with <td> cells

Transitionend event fails to trigger when Chrome tab is not in focus

Using an external JavaScript script may encounter difficulties when loading pages with jQuery

The Ajax request encountered a syntax error due to an unexpected token '<'