Bootstrap: Altering grid column layout for medium and small/extra-small screens

Hello everyone, I'm having a bit of trouble working with Bootstrap. My goal is to create a container with a row that contains three columns of equal width:

<div class="row">

    <div class="col-md-4" style="background:red;">logo</div>
    <div class="col-md-4" style="background:blue;">content</div>
    <div class="col-md-4" style="background:yellow;">content+imgs</div>

</div>

The issue I'm facing is that I want the 'logo' column to be in the second position (after 'content') on XS/SM devices or when resizing the browser window. I've tried using push and pull, but I want the columns to stack vertically, not horizontally like on MD devices. I'm not sure how to achieve this, any suggestions? :)

htmlcssbootstrap-4

Answer №1

By utilizing order classes in bootstrap, you have the flexibility to rearrange columns based on different screen sizes.

For instance, this demonstration showcases how the second column can be displayed first on extra small (XS) and small (SM) screens:

<!--bootstrap 4-->
<div class="row">
      <div class="col-md-4 order-2 order-md-1">first</div>
      <div class="col-md-4 order-1 order-md-2">second</div>
      <div class="col-md-4 order-3 order-md-3">third</div>
    </div>

edit:

If you are using Bootstrap 3 (version 3.3.7), push and pull classes will need to be utilized instead. In your scenario, you'd want to position the logo as the second column. It's important to note that mobile takes precedence in bootstrap framework.

<!-- bootstrap 3 -->
      <div class="row">
        <div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
        <div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
        <div class="col-md-4" style="background-color:yellow;">content+imgs</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

Having trouble repositioning a div element in CSS

I am having an issue with my code. The problem I'm facing is that I am unable to move the green div.free_space below the other two divs, div.main_pic and div.navigation. I don't understand why this is happening. As I am still learning, I would g ...

htmlcss

Tips for adding a personalized close button to a Bootstrap modal

I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tri ...

javascripthtmljquerycssbootstrap-5

What is the fastest way to add an email subscription form to my website without needing to configure a database?

Would it be possible to integrate a sign-up text box on our site for users interested in receiving launch notifications? Any suggestions on the most effective method to implement this feature? EDIT: Our current use of Prefinery has limitations as we cann ...

htmlcssformsemail

Optimizing Material UI Themes: Adjusting the spacing between labels and inputs for improved design

Currently, I am in the process of updating my MUI themes using the overrides functionality. This is how my input field looks like: https://i.sstatic.net/OFAGf.png I am looking to increase the space between the label and the input field. Below is the co ...

cssmaterial-uimaterial-designoverridingthemes

AngularJS - varying actions based on which input field I interacted with first

Here is the tutorial I referenced for this code: <!DOCTYPE html> <html> <head> <title>AngularJS Tutorials</title> <link rel="stylesheet" href="vendor/foundation/foundation.min.css"> </head> <body> & ...

javascripthtmlangularjs

Storing notes using HTML5 local storage

I recently developed a unique note-taking web application where users can create multiple notes and switch between them using tabs on the left side. My next step was to implement local storage for saving these notes, so I inserted the following code: $(d ...

javascriptjqueryhtmllocal-storage

What is the best way to incorporate a function within a $.click (jquery) event that utilizes an id directly from the clicked element?

It seems that my title may not be very clear, but I have a jQuery code snippet that is causing some issues. The problem stems from the fact that when I click on an image with the class 'slideimg', I expect a function named slideDo to be executed, ...

javascriptjqueryhtmlfunction

Analyzing the structure according to the month/week/year

My array consists of count and date values: day = [ { count: 1, date: '2022-07-07' }, { count: 1, date: '2022-08-14' }, { count: 2, date: '2022-07-19' }, { count: 4, date: '2022-07-19' }, { count: 2, date: ...

javascripthtmldatedatetime

How to utilize Bootstrap 4's d-flex to make an element span the entirety of the available space?

Creating this specific design is now achievable with the new bootstrap d-flex feature. Can you guide me on how to craft a section similar to the one depicted in the second image? https://i.sstatic.net/LtTux.png https://i.sstatic.net/RlWvJ.png ...

htmlcssflexboxtwitter-bootstrap-4

Bone structure template - optimizing list spacing with CSS

Currently, I am attempting to float my navigation bar further towards the left by at least 200px, closer to the end of the line visible below. However, every time I add a margin or padding, it causes the elements within the navigation bar to stack on top o ...

htmlcsslistalignment

Issue with jQuery in Internet Explorer causing difficulties loading images

I'm experiencing an issue with my website where all the images load on top of each other when the site is first loaded, creating a chaotic mess. The desired functionality is for the images to remain invisible until specific words are clicked, which is ...

javascripthtmlimage

Centered Bootstrap 4 modal with responsive width

Struggling to create a BootStrap 4 Modal that is centered in the screen and adjusts its width based on content? You're not alone. Despite trying different approaches like the container fluid and CSS methods, achieving a variable width modal is proving ...

htmlcssbootstrap-4

While using the Android Firefox browser, I noticed that the keyboard is causing my screen to shrink in size

As I work on creating a cross-platform HTML page, I have encountered an issue with text fields on Android smartphones. When I attempt to type in a text box, the keyboard pops up and causes my HTML page to shrink within the viewport. I'm curious to kn ...

androidhtmlcsssvgkeyboard

Align the inline text at the center as if it were an inline-block element

Currently working on a design that appears deceptively simple, yet I'm encountering challenges in centering it while keeping the text aligned to the left. https://i.sstatic.net/qhf6p.png In an attempt to have the background span only the actual text ...

javascripthtmlcss

What steps should be taken to ensure that the onmouseover and onmouseout settings function correctly?

The Problem Currently, I have a setup for an online store where the shopping cart can be viewed by hovering over a div in the navigation menu. In my previous prototype, the relationship between the shoppingTab div and the trolley div allowed the shopping ...

javascriptjqueryhtmlcss

Step-by-step guide on creating a draggable navigation bar:

I am encountering an issue creating a droppable menu. I am currently working on Menu 1 but struggling to figure out how to make the drop-down menus appear on the right side. <link href='http://fonts.googleapis.com/css?family=Oswald:300,400' r ...

htmlcss

Receiving an error of "undefined" when trying to capture the selected

One issue I am facing is capturing the selected user option and sending that value in a post request. Let's put aside the post part since it's not directly related to the main question at hand. Currently, the value is showing up as undefined. ...

javascriptjqueryhtml

Reduce the dimensions of a CSS attribute automatically

Displayed below is the image with a width of 192 and height of 109: <a href="https://www.blogger.com/u/1/blogger.g?blogID=4402911157743442948#"><img alt="" class="thumbnail" height="109" src="https://2.bp.blogspot.com/-E5ftfbCCgkw/XjnLpO347cI/AAA ...

cssresponsive-design

What is the best way to align the navbar items at the center in Bootstrap when mx-auto is not working?

<nav class="navbar navbar-expand-sm navbar-light"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls ...

htmlcssbootstrap-4react-bootstrap

What methods can I employ to utilize CSS on a table row that contains a specific class in an HTML

Is there a way to make the CSS affect <tr class="header"> with the class of header? CSS table.table-bordered tr:hover{ background-color: #C0C0A9; } table.table-bordered tr { background-color: #C0C0D9; } Any suggestions on what I ...

htmlcss