Implementing Bootstrap 3.1 to prioritize main content at the top on mobile devices

Below is the grid structure that I am working with

<div class="row">
    <div id="A" class="col-md-3">
        <div class="alert alert-info">A</div>
    </div>
      <div id="B" class="col-md-6">
        <div class="alert alert-danger">B</div>
    </div>
    <div id="C" class="col-md-3">
        <div class="alert alert-info">C</div>
    </div>
</div>

I am looking to display B first on mobile devices (But on larger devices it should display in the original order) and when in mobile view, all items A, B, C should have equal width. I have attempted the following:

<div class="col-md-3 col-md-push-6">
    <div class="alert alert-info">A</div>
</div>
  <div class="col-md-6 col-md-pull-3">
    <div class="alert alert-danger">B</div>
</div>
<div class="col-md-3">
    <div class="alert alert-info">C</div>
</div>

I have tried various combinations without success

Display on a large screen like a desktop

https://i.sstatic.net/I62Bi.jpg

Display on a mobile device

https://i.sstatic.net/c0ewU.jpg

htmlcsstwitter-bootstrapgrid

Answer №1

Give this a try:

<div class="col-md-6 col-md-push-3">
    <div class="alert alert-success">B</div>
</div>
<div class="col-md-3 col-md-pull-6">
    <div class="alert alert-warning">A</div>
</div>
<div class="col-md-3">
    <div class="alert alert-warning">C</div>
</div>

Check out the DEMO here.

Answer №2

Incorporating JavaScript was essential for me to execute this feature. Initially, I locate the bootstrap environment and organize the divs accordingly.

var current='';
function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

    var $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}
if(findBootstrapEnvironment()=="sm"&&findBootstrapEnvironment()!=current){
  current=findBootstrapEnvironment();
  var a=$('.row').children()[0];
  var b=$('.row').children()[2];
  $('.row').children()[0].remove();
  $('.row').children()[1].remove();
  $('.row').append(a);
  $('.row').append(b);
  console.log(current);
}

$( window ).resize(function() {
if((findBootstrapEnvironment()=="sm"||findBootstrapEnvironment()=="md")&&findBootstrapEnvironment()!=current){
  current=findBootstrapEnvironment();
  var a=$('.row').children()[0];
  var b=$('.row').children()[2];
  $('.row').children()[0].remove();
  $('.row').children()[1].remove();
  $('.row').append(a);
  $('.row').append(b);
  console.log(current);
}
});

Check out the demonstration here: https://jsfiddle.net/oog0gdph/

Answer №3

<div class="col-xs-12 col-sm-6 col-sm-push-4 " >X</div>
<div class="col-xs-12 col-sm-pull-6 col-sm-3" >Y</div>
<div class="col-xs-12 col-sm-3">Z</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

Issue with the width on Mobile Safari

Encountering a strange problem with mobile Safari on iPads and iPhones where the body and some divs are getting cut off in the middle. Despite trying various solutions, I can't seem to fix it. The website works perfectly fine on desktop but not on mob ...

htmlcsscss-floatmobile-safari

Customizing the DatePicker with a unique button in material-ui

For my current project, I am utilizing a Datepicker component. I am looking to incorporate a custom information button in the upper right corner of the calendar layout, similar to the example image provided below: https://i.stack.imgur.com/fHMbn.png Unfo ...

javascripthtmlcssreactjsmaterial-ui

Having trouble triggering the onclick event on a dynamically created table using JavaScript

I am facing an issue with adding a table programmatically that has an onclick event triggering a specific JavaScript function using the row's id for editing purposes. Unfortunately, the function is not being called as expected. I have attempted to mod ...

javascriptjqueryhtml

JavaScript appends a backslash character to a CSS class

I am attempting to populate index.html with the contents from an array using a JavaScript loop. However, I am encountering an issue where a CSS class for picture formatting is displaying some odd characters when rendered in the latest version of Firefox. ...

javascripthtmlcssbootstrap-4

Using jQuery in an external JavaScript file may encounter issues

As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...

javascriptjqueryhtmlajax

Tips for analyzing a JSON response from a meme API using HTML and JavaScript

I'm looking to integrate an API into my website in order to fetch random memes from reddit. The API was developed by D3vd and can be found on github at When I make a request to (the api), the response typically looks like this: { "postLink ...

javascripthtmljson

Issue with the scope of Bootstrap Accordion

Observing that the event triggers on a single Bootstrap accordion can affect all other accordions on the same page, I am wondering if there is a way to isolate this behavior without altering the markup or using $(this). Any suggestions? Check out this exam ...

javascriptjquerytwitter-bootstrap

Troubleshooting CSS keyframe animation issues in IE and Edge

I have created an animation that works perfectly in all browsers except for IE and Edge. You can view the page here. .progress-container { position: relative; } .background-progress-bar, .progress-bar { width: 100%; height: 10px; top: 0px; left ...

htmlcssinternet-explorercss-animationsmicrosoft-edge

"Exploring the process of utilizing AngularJS to open a .docx file in a new template

When attempting to open a .jpeg or .pdf file in a new template using an iframe, it was successful. However, the same approach failed when trying to open a .docx file. How can this issue be resolved? Angularjs code: $scope.openTemplate = function ($fpath ...

htmlangularjsiframe

AJAX code fetching dynamic content without relying on file loading

When I load my program, the dynamic code does not appear on the page until I reload it again. I attempted to use the onload event in the body to load content from an XML file using AJAX, but it only works after closing and reopening the program, not dynam ...

javascripthtmlajaxservlets

What is the correct way to properly wrap the div component in this code snippet?

I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...

javascripthtmljquerycssimplementation

Issue with Angular JS: Unable to remove uploaded files

I'm currently learning about AngularJS and I've been working on uploading and deleting files. However, I've come across an issue with deleting files. Below is the HTML code: <div> <ul> <li ng-repeat="files in table.proce ...

jqueryhtmlangularjs

CSS - turn off inheritance for font styling

I am trying to figure out how to turn off the font:inherit property in Ionic's global CSS. This property is causing issues when I try to style text using ng-bind-html, as it adds unnecessary classes to elements like i and bold. I attempted to override ...

htmlcss

Padding has an impact on the widths of flexbox items

Take a look at this code snippet: http://jsfiddle.net/56qwuz6o/3/ <div style="display:flex"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> </div> div div { ...

cssflexbox

Adding graphs dynamically to Dygraphs allows for real-time updates and interactive data

I recently started using Dygraphs for one of my projects and I am still learning how to work with it. After reading through the documentation and looking at a few examples, I noticed that the constructor for Dygraphs requires a div element where the graph ...

javascriptjqueryhtmldygraphs

Loading all the content and scripts from one page into another

Are you looking for a seamless way to view and book our scuba diving programmes without having to navigate away from the main page? If so, we understand your desire for convenience. Instead of redirecting you to separate pages when you click on buttons li ...

phphtmlajaxload

What are the reasons for avoiding placing CSS code directly within HTML?

Situation: My website is dynamically served, with all CSS and javascript directly embedded into the HTML document to optimize speed. Advantages: Reduces web requests Fewer files downloaded Speeds up webpage loading time Disadvantages: Potential cachin ...

javascripthtmlcss

Dropping challenging shapes in a block-matching game similar to Tetris

I'm currently working on a game similar to Tetris, but with a twist. Instead of removing just one line when it's full, I want to remove all connected pieces at once. However, I've run into a roadblock when trying to implement the hard-drop f ...

javascripthtmlgame-physicstetris

Conceal the column title for order items in the WooCommerce admin panel

I've been attempting to hide certain columns within the administrative section of Woocommerce, but have had no success with the code I'm using. I'm currently stuck and my question is: Is there a way for me to conceal specific column names i ...

csswoocommerceorders

Automating the process of choosing a dropdown option on a website with a Python script

When navigating the website, I found that I needed to choose a specific time duration from a drop-down menu, as shown in the image. My goal is to automate this process using a Python script. I already have a script in place, but it requires an additional c ...

pythonhtml