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

How can I create responsive buttons with icons using material-ui?

I'm working with a material-ui Button that has a startIcon, and I need to hide the button text on smaller screens while still showing the icon. One common solution would be to use the useMediaQuery hook to identify the browser size and render a diffe ...

cssreactjsmaterial-ui

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Striving to maintain the absolute positioning of the right column as users scroll through the left column has proven to be a challenging task. Despite exploring various solutions from stackoverflow and google, none seem to effectively address this issue. ...

htmlcsstwitter-bootstrapreactjs

Only scroll the div if it is not within the visible window

I've been looking at this snippet: The sidebar division is what I'm focusing on right now. I want the div to scroll along as I scroll down the page, but I need it to stop scrolling when its bottom is in view. The same should apply when scrollin ...

javascriptjquerycss

Can a CSS class be designed to have a value that changes dynamically?

Let's say we have some div elements that look like this: <div class="mystyle-10">Padding 10px</div> <div class="mystyle-20">Padding 20px</div> <div class="mystyle-30">Padding 30px</div> Would it be possible to c ...

css

Modify the CSS styles of inner elements dynamically

Within my code, I have implemented a SplitPane and included a CSS file that contains the following styling rules: .split-pane > .split-pane-divider { -fx-padding: 0 0 0 1; -fx-background-color:-fx-background; } However, during runtime, I e ...

javacssjavafx

Enhancing the appearance of the content editor with a personalized touch

I am working with a standard content editor that utilizes an iFrame as the text area. Upon changing dropdown options, it triggers the following command: idContent.document.execCommand(cmd,"",opt); Where "idContent" refers to the iFrame. One of the dropd ...

javascripthtmlcsscontent-management

Display data-content vertically using CSS

Looking for a way to display text vertically one by one with CSS? While the rotation method produces this result: https://i.stack.imgur.com/utAiN.png However, I aim to achieve something more like this: https://i.stack.imgur.com/fuVyb.png If you have an ...

htmlcssrotationvertical-text

A custom-styled table in Bootstrap featuring alternating color rows, populated with data from

I am having trouble displaying striped rows in my table due to nested ng-repeats. Instead of getting the output I want, my rows are grouped and colored the same. Is there a way to fix this issue? <table class="table table-striped table-bordered table ...

angularjstwitter-bootstrap

How can I center my dynamic CSS3 menu with varying widths?

I am facing an issue with my css menu where the width is set to 400 for non-Admin users and 500 for Admins. The problem arises when I center the menu for Admins by setting the UL width to 500, as it appears off-kilter for non-admin users whose menu is only ...

phphtmlcss

What is the best way to customize the lower border color of a collapsed Bootstrap navbar with an inverse design

Discussing this issue.. I am noticing two distinct colors. One is darker than the background shade and the other is lighter than the background shade. How can these be set? <nav class="navbar navbar-inverse"> <div class="container-fluid"> ...

csstwitter-bootstrap

Tips for creating a customized dropdown menu that opens upwards without relying on Bootstrap

Looking for some assistance with creating an animated dropdown menu that slides upwards. Any help is appreciated! $('.need-help').click(function() { $('.need_help_dropdown').slideToggle(); }); .need-help { background:url(../im ...

javascriptjqueryhtmlcss

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

Inaccurate sizing of popup dialogs on SharePoint 2010

Currently, I am in the process of revamping a SharePoint 2007 web application to SharePoint 2010. I was surprised to find that the popup dialog boxes for new items, edit, etc. have inline styles for fixed width and height. Below is an example where div.ms ...

jquerycsssharepointsharepoint-2010

What is the best way to display multiple files in a vertical stack when choosing a file?

<div class="selected-file-container align-items-center justify-content-between d-none"> <div class="selected-file d-flex align-items-center"> <img id="selectedImage" class="hidden" src="&qu ...

javascripthtmlcss

Prevent event propagation in jQuery by using .stopPropagation() when hovering over a

When trying to implement event.stopPropagation() in a specific scenario, I encountered an issue with a blinking background image on my submenu. To address this, I added a pseudo-element (background:green) to the parent element by toggling a new class using ...

javascriptjquerycssstoppropagation

Utilize the id in AngularJS to bring attention to a specific row within a table

I am brand new to using angularjs. I currently have a table structured like this: HTML <table class="table table-striped" id="manageResumeTable"> <thead class="text-center text-info text-capitalize"> <th class="text-center col- ...

javascriptjqueryhtmlcssangularjs

Conceal image and substitute with a different image using JavaScript

My query pertains to JavaScript: how can I create an effect where clicking the jump-down button opens a text box and causes the button to change direction and rotate? I am considering using two photos - one hides when the jump-down button is clicked, and ...

javascripthtmlcss

Bootstrap 4: The mystery behind why the popover fails to appear inside a scrollable dropdown

Is there a way to replicate the behavior of Bootstrap 3 dropdowns with scrollbars on hover and popovers in Bootstrap 4? It seems that setting overflow:hidden; for scrolling functionality in dropdown menus also hides the popover. I have tried using containe ...

javascriptjquerycssbootstrap-4bootstrap-popover

The placement of footers remains consistent

Struggling with the placement of my footer on a website I'm designing. The footer should be at the bottom of the page with a set percentage margin, but it's not working as expected. Here is a link to My website Reviewing the footer CSS: .foote ...

htmlcss

What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

I am utilizing these customized components: import styled, { css } from 'styled-components' const Container = styled.div` background-color: ${props => props.theme === "light" ? "hsl(0, 0%, 98%)" : "hsl(235, 24%, 19% ...

javascriptcssreactjsstyled-componentsreact-props