Rearrange the bootstrap col to be placed at the bottom without using absolute

I currently have three blocks structured like this:

<div class="col-sm-6 col-xs-12 left-top"></div>              
<div class="col-sm-6 col-xs-12 right-top">
    <div class="col-sm-6 col-xs-12 left-bottom"></div>              
    <div class="col-xs-6 right-bottom">

However, on smaller screen sizes, I would like them to appear as follows:

<div class="col-sm-6 col-xs-12 left-top -> Top"></div>              
<div class="col-xs-6 right-top -> Middle">
    <div class="col-sm-6 col-xs-12 left-bottom -> Bottom"></div>
    <div class="col-xs-6 right-bottom -> Middle">

This means that the four blocks should be stacked vertically in a different order without using absolute positioning. Any suggestions on how to achieve this effect?

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Utilize Bootstrap 3's pull and push classes to manipulate the positioning of elements on your webpage. More details can be found here.

To implement this in your code, consider the following:

<div class="col-sm-6 col-xs-12 left-top"></div>
<div class="col-xs-6 right-top"></div>
<div class="col-xs-6 col-sm-push-6 right-bottom"></div>
<div class="col-sm-6 col-xs-12 col-sm-pull-6 left-bottom></div>

By structuring your divs in the order you want them to appear in mobile view and using col-sm-push and col-sm-pull, you can control their arrangement when transitioning from desktop to mobile view.

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

Creative approach to achieving responsive borders with Bootstrap 5

Looking to create a dynamic border using Bootstrap 5 that will hide at specific breakpoints. I tried the following code: <p class="border-bottom border-lg-0-bottom border-lg-end">text here</p> Unfortunately, this code did not work a ...

cssbootstrap-5

Is there a way to attach HTML buttons to the bottom of their respective cards?

I am currently in the process of creating a directory website. To build it, I chose the Jekyll Moonwalk theme as a solid foundation and am customizing it heavily to suit my requirements. Since this is my inaugural website project, I'm learning as I p ...

htmlcssjekyllweb-frontend

Wordpress Sub-Menu Being Eclipsed by Banner

After upgrading my Wordpress to version 3.5.1, I noticed a problem on my site where the Submenus are loading but quickly getting hidden behind the Banner. Despite trying various modifications in the CSS file, the issue remains unresolved (and might have wo ...

csswordpressmenu

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

css

Incorporating information into Observable in Angular 2

I'm currently working on loading gifs from the API based on a search parameter in batches of 20. Once I reach the bottom of the page, I need to load another 20. To achieve this, I've implemented observables. However, I'm facing an issue with ...

htmlangularangular2-observables

Retrieve the value of a TextBox and display it as the title of a Tool

Hello there, I am currently learning front-end technologies and have a question. I would like to retrieve the value of a TextBox and display it in a Tool-tip. The code for the TextBox has a maximum length of 30 characters, but the area of the TextBox is no ...

javascripthtmlreactjstextboxtooltip

A fragmented rendering of a gallery featuring a CSS dropdown menu

Hey there! I'm a newbie coder seeking some assistance. Recently, I stumbled upon a tutorial online that taught me how to create a drop-down menu. However, whenever I hover over "Gallery" on my website, things go haywire and the layout gets all messed ...

htmlcssuinavigationbar

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

I want to create floating labels that resize dynamically when an input is clicked, similar to modern forms. I am using vanilla JS exclusively for this task. Currently, the setup works with the <input> tag. However, it does not work with the <text ...

javascripthtmlcssforms

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

javascripthtmlcanvasrenderingpixi.js

Use the CSS class

To create tables with 3 rows and 2 columns using divs, I have utilized the ng-repeat directive. Within this setup, there are two CSS classes - red and green, that need to be applied in the following manner: - Red class for the 1st column of the 1st row - ...

angularjscsscss-selectors

Display HTML content generated by JavaScript in the page source

Can the HTML elements I've added through JavaScript and jQuery codes be displayed in the page source (ctrl+U)? ...

javascriptjqueryhtml

Display or conceal HTML based on the user's location within the webpage

I'm trying to implement a dynamic horizontal navigation bar on my website that appears and disappears based on the user's position on the page. However, I'm facing some challenges in getting it to work correctly. Here is the snippet of code ...

javascripthtmlscrollshow-hide

Swap out a paragraph with a city name fetched from a JSON file

While working on a weather app, I encountered an issue. The app needs to automatically detect the user's location and display the appropriate temperature along with the city name. I have been trying to fetch data from JSON to replace the placeholder t ...

javascriptjqueryhtmljson

Ensuring the height of the HTML element for menu items matches the navigation bar

I've been struggling to customize a navigation bar styled with Bootstrap 4. My goal is to create a hover effect on the menu items similar to the image or code snippet provided, but without that annoying thin blue flashing offset below the item. Despit ...

cssbootstrap-4

Create a JavaScript and jQuery script that will conceal specific div elements when a user clicks on them

Within my navigation div, there exists another div called login. Through the use of JavaScript, I have implemented a functionality that reveals additional divs such as login_name_field, login_pw_field, register_btn, do_login_btn, and hide_login upon clicki ...

javascriptjqueryhtml

ToggleButtonGroup in Material UI is a great way to create toggle

I am trying to implement the ToggleButtonGroup feature from Material UI in my React application. I am facing an issue where I am unable to pass values into my state correctly. The code snippet provided below shows that while the Select component works fi ...

cssreactjsmaterial-ui

Switch from using a stylesheet to implementing jQuery

In order to achieve real-time replacement, the style changes immediately after a user interaction: $('link#mystyle').attr('disabled', 'disabled'); $('link#mystyle').remove(); if(new_style){ $('head').ap ...

jqueryhtmlcssstylesheet

Utilize React's capability to pass multiple parameters to event handlers

Trying to implement React using ES6 syntax has been quite a challenge. Previously, in ES5 I used setInitialState without a constructor along with function binding to make things work seamlessly. The goal now is to update the state when an input element is ...

reactjstwitter-bootstrap-3

When I click the button, the page goes blank and keeps loading endlessly

http://jsfiddle.net/iansan5653/7EPjH/17/ <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type="text/javascript"> function chart() { var pressure; ...

javascripthtmlfunctiongoogle-visualization

Error code "ER_BAD_FIELD_ERROR" was encountered with errno 1054 and sqlState "42S22" in index 0 while using MySQL with Angular and managing sessions

When I log in, the following code is executed: <div ng-include="'partials/navbar'"></div> <form name="form" ng-submit="login(form)"> <div> <input type="text" placeholder="Email" ...

javascripthtmlmysqlangularjssession