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.

htmlcsstwitter-bootstrap

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

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 №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 №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing page refresh when typing in a form input: Tips and tricks

I'm currently puzzled by a small issue. In my web application, I have a chat box that consists of an input[type='text'] field and a button. My goal is to send the message to the server and clear the input field whenever the user clicks the b ...

javascripthtmlangularjstwitter-bootstrap

Ways to select the element based on a specific CSS property value in the inline style

As a novice in the world of Javascript, I am currently attempting to select an element within an array of images where the opacity is set to 1. Could someone please guide me on how to achieve this? I've tried using hasAttribute, but I'm unsure ho ...

javascriptcss

Struggling to activate the link:hover transformation

At this link, you can find an example of using CSS transform to rotate links on hover, but I'm having trouble getting it to work as expected. <!DOCTYPE html> <html> <head> <style> a:hover{ ...

htmlcsstransform

Utilizing Angular for Webcam Integration

After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream =&g ...

htmlangulartypescriptvideogetusermedia

What is the process for incorporating a button to the left of the search field?

Is it possible to enhance the search field by adding a button to make it more user-friendly? Below is the code I have been using: <div id="search"> <div class="container"> <h1>Search U.K. house price data</h1> <form c ...

htmlcsstwitter-bootstrap

Issues with Header and Nav tags functionality in Internet Explorer 11 persist post deployment

When I deployed my HTML elements to the server, I encountered a problem with IE. Upon inspecting the elements in different browsers like Chrome and IE, I noticed that they appeared in the following order: <head> <link rel="stylesheet" ...

htmlinternet-explorer

Issue with div element not stretching to 100% width

I am currently working on a fluid layout design where the template includes a header, menu, and body section. <div class="w100 h100"> <div id="headerBox" style="height: 10%;" class="w100"> <div style="width: 80%;" class="lfloat ...

javascriptjqueryhtmlcss

Change the position of an HTML image when the window size is adjusted

My web page features a striking design with a white background and a tilted black line cutting across. The main attraction is an image of a red ball that I want to stay perfectly aligned with the line as the window is resized, just like in the provided gif ...

javascripthtmlcss

Switch out the Select feature for Checkboxes

Hey there! I'm currently trying to enhance the style and functionality of the Select checkboxes on my blog. However, when I change them to checkboxes, they lose their original function of searching for selected tags in each Select option. This issue i ...

javascripthtmlblogger

The HTML email appears distorted on Yahoo and Outlook, but displays correctly on all other platforms

Basically, I have an HTML email that was converted from a PSD file. I sliced the layers, made some changes to the URLs, and did a test email. The email looks fine on most email clients, but when I send it to Yahoo Mail or Hotmail/Outlook and open it in Chr ...

htmlcssemail

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

I have a setup with 2 nested <div> elements, both utilizing the tooltip() function. When I hover over the inner <div>, the tooltip of the outer <div> also displays. To resolve this issue, I attempted to clear the title of the inner <di ...

csstwitter-bootstraptooltip

Troubleshoot: Inability to highlight a column and row in a table using ::after and ::before

To create a hover effect where the corresponding column and row are highlighted when the mouse is on a cell, as well as highlighting the row for player 1's actions and the column for player 2's actions, I attempted the following code: /* CSS Cod ...

htmlcss

Maximizing page space with ReactJS and advanced CSS techniques

I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...

javascriptcssreactjs

Tips for dynamically styling a Styled Component with all the CSS housed in an external file

My goal is to dynamically render a Styled Component. In the past, it was simple because all styling was contained within the component itself. However, I now strive to maintain a separation of concerns by storing the CSS in an external file. While this app ...

javascripthtmlcssreactjsstyled-components

Anchor link leading to an incorrect location

Sorry for the potentially silly question, but I'm struggling to figure out what's happening here. I'm currently working on a website and trying to create an anchor link at . I've placed the anchor just before in this code: <a name ...

htmlhyperlinkpositionanchor

Alert: The comment index is not defined on line 5 of the comment.php file located in C:xampphtdocsindex

There is a piece of code I am struggling with: <?php if($_POST){ $name = $_POST['name']; $content = $_POST['comment']; $handle = fopen("comments.html","a"); fwrite($handle,"<b>" . $name . "</b><br ...

phphtmlcomments

Ways to stop VoiceOver from selecting the background content when a modal is open

Is there a way to prevent VoiceOver from reading the content behind a modal? I tried using aria-modal=true, but it seems VoiceOver does not support this feature by default like NVDA and JAWS do. I found more information about this on . According to the in ...

javascripthtmlaccessibilitywai-ariavoiceover

Tips for making search results stand out

Hey there! I've got a search function set up to look for keywords in a database. I'm interested in highlighting those keywords and found a second function that I want to integrate into my search function. This is the current code for the search: ...

phpmysqlhtmlfunctionsyntax-highlighting

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...

jquerycssimage

Tips for extracting designated link by employing a Selector CSS Query

Please note: While a similar question has been asked on JSoup:How to Parse a Specific Link, I have a more specific variation of this inquiry. Kindly read on for further details. In order to extract data from a particular site link, I am looking to utili ...

cssjsoup