Managing the order of rows in Bootstrap specifically for mobile devices

Question

Managing the order of rows in Bootstrap specifically for mobile devices

Take a look at this simple HTML snippet on this fiddle that illustrates a specific layout on wide desktop screens:

Here is the code responsible for rendering the above layout:

<div class="container">
<div class="row">
<div class="col-md-4"><img class="img-responsive" src="http://placehold.it/800x400"></div>
<div class="col-md-8>
        <h1>Random decisions for emacs, with functions and a minor mode.</h1>
        <p>Random decisions for emacs, with functions and a minor mode.
    Roll various types of dice, generate random numbers from
    </p>
</div>
</div>

On mobile devices (when the page width is reduced), the layout changes to display as follows:

My goal is to reposition the header ("Random decisions..") above the image in mobile view only (without changing anything on desktop). It seems like rearranging rows in mobile view may achieve this, but I'm looking for guidance on achieving this in an organized manner.

html css twitter-bootstrap

Answer 1

Answer №1

Flexbox is the solution for this.

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  .top {
    order: 2;
  }
  .bottom {
    order: 1;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 top">
      <img class="img-responsive" src="http://placehold.it/800x400">
    </div>
    <div class="col-md-8 bottom">
      <h1>Random decisions for emacs, with functions and a minor mode.</h1>
      <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
      </p>
    </div>
  </div>

Alternatively, you can achieve the same effect without specifying order values by simply reversing the order using:

@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column-reverse;

  }
}

Check out the Codepen Demo for reference

Answer 2

Flexbox is the solution for this.

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }
  .top {
    order: 2;
  }
  .bottom {
    order: 1;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 top">
      <img class="img-responsive" src="http://placehold.it/800x400">
    </div>
    <div class="col-md-8 bottom">
      <h1>Random decisions for emacs, with functions and a minor mode.</h1>
      <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
      </p>
    </div>
  </div>

Alternatively, you can achieve the same effect without specifying order values by simply reversing the order using:

@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column-reverse;

  }
}

Check out the Codepen Demo for reference

Answer 3

Answer №2

To achieve a responsive layout using Bootstrap, you can utilize the Push/Pull classes. Rearrange your content so that your image comes second in the sequence to ensure it shifts below the header on mobile devices and moves to the left as the viewport expands (following Bootstrap's mobile-first approach).

For more information, refer to Column Reordering

Example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-8 col-md-push-4">
      <h1>Random decisions for emacs, with functions and a minor mode.</h1>
      <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
      </p>
    </div>


    <div class="col-md-4 col-md-pull-8">
      <img class="img-responsive" src="http://placehold.it/800x400">
    </div>

  </div>
</div>

Answer 4

To achieve a responsive layout using Bootstrap, you can utilize the Push/Pull classes. Rearrange your content so that your image comes second in the sequence to ensure it shifts below the header on mobile devices and moves to the left as the viewport expands (following Bootstrap's mobile-first approach).

For more information, refer to Column Reordering

Example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-8 col-md-push-4">
      <h1>Random decisions for emacs, with functions and a minor mode.</h1>
      <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
      </p>
    </div>


    <div class="col-md-4 col-md-pull-8">
      <img class="img-responsive" src="http://placehold.it/800x400">
    </div>

  </div>
</div>

Answer 5

Answer №3

To achieve the desired layout using bootstrap, utilize the col-**-push-* and col-**-pull-* classes. By reversing the order of elements and using these classes, you can create a mobile-friendly design where the first element is pushed ahead and the second element is pulled back by the appropriate number of columns. For example, placing the col-md-8 div at the top with a col-md-push-4 class, while adding a col-md-pull-4 to the second div.

Answer 6

To achieve the desired layout using bootstrap, utilize the col-**-push-* and col-**-pull-* classes. By reversing the order of elements and using these classes, you can create a mobile-friendly design where the first element is pushed ahead and the second element is pulled back by the appropriate number of columns. For example, placing the col-md-8 div at the top with a col-md-push-4 class, while adding a col-md-pull-4 to the second div.

Answer 7

Answer №4

After trying a few options, I decided to go with the suggestion from @vanburen as it ultimately guided me towards this solution.

<div class="container">
<div class="row">

<div class="col-md-8 col-md-push-4">
    <h1>Creating random choices for emacs, including functions and a minor mode.</h1>
</div>

<div class="col-md-4 col-md-pull-8">
    <img class="img-responsive" src="http://placehold.it/800x400">
</div>

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-8">
    <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from</p>
    </div>

</div>

</div>

Answer 8

After trying a few options, I decided to go with the suggestion from @vanburen as it ultimately guided me towards this solution.

<div class="container">
<div class="row">

<div class="col-md-8 col-md-push-4">
    <h1>Creating random choices for emacs, including functions and a minor mode.</h1>
</div>

<div class="col-md-4 col-md-pull-8">
    <img class="img-responsive" src="http://placehold.it/800x400">
</div>

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-8">
    <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from</p>
    </div>

</div>

</div>

Managing the order of rows in Bootstrap specifically for mobile devices

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

An empty space separating the header and the navigation bar

Ensuring the Accuracy of User Input within Bootstrap's jQuery Modal Popup

Creating and implementing a HTML template from scratch, devoid of any frameworks

How can I display data saved from step 2 in a multi-step form with 4 steps, when I return from step 3 to step 2?

Resetting the check status in html can be accomplished by using the checked

Page returning causing tabs to refresh improperly

Display an HTML image within a span tag and ensure it is aligned to the bottom

Learn how to iterate over an array and display items with a specific class when clicked using jQuery

How can I retrieve information from an HTML or JavaScript object?

Utilizing AJAX and JavaScript to generate a table using the AJAX response and placing it within a <div> element

The separator falls short of spanning the entire width of the page

How can I set a default radio button selection when the page is loaded?

Bootstrap 3's Clear:Left Media Query Feature

Retrieving all options from a dropdown list in HTML using ASP.net C#

How can I use JavaScript to create a drop-down menu that only appears after selecting the previous one?

Off-center rotation of an element - seeking solution [closed

The Material UI dialog box popped up against an unexpected gray backdrop

Switch the appearance between two elements

Set the default value for a form control in a select dropdown using Angular

Utilizing CSS to create dynamic 3D cube transformations