Rearrange the middle column to be the top column on smaller screens

I am trying to create a layout with 3 columns in a row. The challenge is to prioritize the middle column on top when viewed on small screens, with the left and right columns below it. To clarify, on large screens the order should be 1 2 3, while on small screens it should be 2 1 3. I attempted to use the code snippet provided in a similar question but couldn't get it to work.

<div class="row">
<div class="col-md-6 col-md-push-3">
    2
</div>
<div class="col-md-3 col-md-pull-6">
    1
</div>
<div class="col-md-3">
    3
</div>
</div>

Does anyone have any suggestions or alternative solutions?

csstwitter-bootstrap

Answer №1

div {
width: 100%;
height: 60px;
border: 1px solid #000;
background-color: #ccc;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-6 col-md-6 col-md-push-3">
    2
</div>
<div class="col-xs-3 col-md-3 col-md-pull-6">
    1
</div>
<div class="col-xs-3 col-md-3">
    3
</div>
</div>

Answer №2

This operation runs smoothly.

    <div class="container text-center">
<div class="row">
<div class="col-md-6 push-md-3">
<div class="alert alert-danger">
    1
</div></div>

<div class="col-md-3 pull-md-6">
<div class="alert alert-info">
    2
</div></div>

<div class="col-md-3">
<div class="alert alert-success">
    3
</div>
</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

Consistently Incorrect Date Formatting in Bootstrap Display

I have a potential issue with my date display. It should show a default "Start Date" in a short date format, but when the "Sale Date" DropDownBoxFor is toggled, it should display an AJAX result date. However, the display always appears in a date and time f ...

javascriptc#jqueryajaxtwitter-bootstrap

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

htmlcss

In Angular, when a component is clicked, it is selecting entire arrays instead of just a single item at a

I am currently working on implementing a rating feature using Angular. This component will be used to rate different languages based on how proficient I am with them. My issue lies in the fact that when I click on one array element, it automatically selec ...

javascripthtmlcssangulartypescript

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

Inverted CSS Shadow Box

I thought I had a good grasp on how CSS shadow-box works, but it seems I was mistaken. Could someone provide me with a visual explanation of why the <hr/> looks the way it does here? Take a look at style 13: https://codepen.io/ibrahimjabbari/pen/ozi ...

css

Navbar active class not updating on jQuery page scroll

My one-page website has a fixed navbar that I want to change its active status when scrolling down to specific div positions. Even though I tried using jQuery, the code doesn't seem to work as intended. Here is the snippet: // SMOOTH SCROLLING PAGES ...

javascriptjqueryhtmlcss

Is there a way to simplify this "stopwatch" even more?

Looking for advice on simplifying my JS stopwatch timer that currently only activates once and keeps running indefinitely. As a newcomer to JS, this is the best solution I could come up with: let time = 0 let activated = 0 function changePic() { if(a ...

javascripthtmlcss

Creating a button in ReactJS with text displayed under an icon

Presently, I am working with a component that looks like this: https://i.stack.imgur.com/qGCwj.png This is the code for the component: import React from "react"; import {withStyles} from "material-ui/styles"; import Settings from "material-ui-icons/Setti ...

javascriptcssreactjsmaterial-ui

Stop the stutter in Chrome caused by scrolling animations

I'm encountering a delay with the scroll.Top() function. This issue is specific to Google Chrome on Desktop. Here is the jQuery code I am using: $('html, body').animate({ scrollTop: $('#second').offset().top-140 }, 'slow&apos ...

htmljquerycssgoogle-chrome

Adjusting input height with CSS in Google Chrome

When I define an input element with the following CSS properties: input { border: none; font-family: arial, sans-serif; font-size: 16px; line-height: 16px; padding: 0; } I anticipate the height of the input to be 16px, however, upon inspecting ...

htmlcssgoogle-chrome

The ability to scroll horizontally for individual items within a larger container div

JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...

htmlcssscroll

Selector for the Nth child element

Struggling with the nth child selector. Here is the HTML snippet: HTML <div class="container"> <ul class="mh-menu"> <li> <a href="#"> <span>Chairman of the Board</span> <spa ...

htmlcsscss-selectors

Developing a custom mixin to alert a banner at the top of the webpage

I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button. After exploring various methods to ...

htmlcsscss-transitions

Arranging elements on a website using CSS styling

I'm interested in creating a button <Button id="Button" text="Hey" />. I would like to know how I can position it on a webpage exactly where I want it, rather than it just appearing randomly without content. ...

htmlcss

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

javascripthtmlcsstwitter-bootstrapbootstrap-carousel

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div>​ Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...

javascripthtmlcssfirefox

Tips for adjusting the width of items within the Box element in Material UI React

I am utilizing React Material UI along with the Box component to style my form. In this scenario, I have 4 items in each row except for the last row where I need to display only 3 items with the last item filling the entire row by merging two elements toge ...

cssreactjsmaterial-uimaterial-design

Error 404 - Bootstrap not found in Bower Components

I've scoured the internet and checked multiple forums, but I haven't been able to find a solution that works for me. My Node project has a specific structure: ├── app │   ├── config │   │   ├── env │   │   ...

node.jstwitter-bootstrapexpress

What could be the reason for the top alignment of only a portion of the cell

Here is the code snippet I am working with: <html> <head> <style> table.t_group { border: 2px solid black; margin: 0 auto 0 auto; } table.t_group > tbo ...

htmlcss

Broken image path in the Model-View-Controller framework

When using the jQuery DatePicker plugin in my MVC application, I face an issue with displaying a certain image for the Calendar pop-up. Here is the code snippet: $.datepicker.setDefaults({ showOn: "both", buttonImage: "../images/Calendar.png", ...

jquerycssasp.net-mvcimagesrc