Placing the right column above the left column for better visibility

I am facing a challenge with the layout of my two columns. When viewing on desktop:

On mobile:

The current design has the column on the left, "Browse Programs", appearing below the left column. I am looking for a solution to have it appear above the left column instead. I have tried various methods, such as changing the order of columns in the HTML and using "float-left" (which works but is not ideal). I have also experimented with col-md-pull and col-md-push but have not had success with these solutions.

It is worth noting that I am not using Bootstrap 4 and would like to maintain the current setup for now.

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

  1. Arrange the blocks in the layout in the correct order for mobile devices.

    Introduction: Bootstrap follows a mobile-first approach, where code is optimized for mobile devices initially and then adjusted for larger screens using CSS media queries.

  2. Modify the order of the blocks. Bootstrap 3 provides classes like .col-md-push-9 and .col-md-pull-3 for this purpose, while Bootstrap 4 offers specific order classes.

Demo for Bootstrap 3: https://codepen.io/glebkema/pen/qBONaQd

/* Styling for Demo */
.row-demo > div {
color: white;
font: bold 20px sans-serif;
padding: 9px 15px 30px;
}
.row-demo > div:first-child {
background: #69c;
}
.row-demo > div:last-child {
background: #c69;
}
<div class="container">
<div class="row row-demo">
<div class="col-md-3 col-md-push-9">Top on mobile / Right on desktop</div>
<div class="col-md-9 col-md-pull-3">Bottom on mobile / Left on desktop</div>
</div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

Demo for Bootstrap 4: https://codepen.io/glebkema/pen/GRpZVZq

/* Styling for Demo */
.row-demo > div {
color: white;
font: bold 20px sans-serif;
padding: 9px 15px 30px;
}
.row-demo > div:first-child {
background: #69c;
}
.row-demo > div:last-child {
background: #c69;
}
<div class="container">
<div class="row row-demo">
<div class="col-md-3 order-md-last">Top on mobile / Right on desktop</div>
<div class="col-md-9 order-md-first">Bottom on mobile / Left on desktop</div>
</div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

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

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

Guide to positioning an item at the bottom of the screen using Material UI

Can anyone help me align a button to the bottom of the screen so that it remains in place even when scrolling through a list? I've tried adjusting the code but can't seem to get it right. This is how my current screen appears, with the button al ...

htmlcssreactjsmaterial-ui

Creating HTML forms allows for images to be used as checkboxes

I'm attempting to convert an HTML forms checkbox into a clickable image that changes its appearance when clicked. Additionally, I need it to be capable of storing one or two variables (specifically for generating them with row and column values) and f ...

htmlcssformscheckbox

How to efficiently highlight a row in a table when hovering over one of its cells, utilizing the React hook useState

I have a table displaying a list with three columns: item, delete-button-1, delete-button-2. When hovering over a delete button, the corresponding item is highlighted in red. Utilizing React Hook useState to store the index of the row where the delete bu ...

javascripthtmlcssreactjsreact-hooks

The left side of the form input material is obscured unless the necessary criteria are fulfilled

I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red ...

cssangularmaterial-uiangular-material

The navigation menu that usually appears on mobile devices is surfacing on desktop screens instead - update: images now

I have recently been working on my website juniorgoldreport.com, which was created using WordPress. The plugin I am using specifically for the mobile nav bar is The functionality and ease of use of this plugin are incredible. The setting to show the toolb ...

htmlcsswordpress

Effortlessly automate clicking with JavaScript or HTML - learn how now!

Does anyone know how to automatically click a button on a page when it loads? I attempted using this JavaScript code, but it didn't work. <a href="javascript:Clickheretoprint()" id="print"> <script type="text/javascript"> $(document).rea ...

javascriptjqueryhtml

Examples of implementing Django Template styling with Bootstrap through code snippets

I am seeking a method to incorporate variables into the styling of django templates using Bootstrap. <div class="card mb-2 text-white bg-info"> The specific part for each card will vary accordingly. Is there a similar approach that I can ...

pythonpython-3.xdjangobootstrap-4django-templates

Resizable item within a text box (similar to an HTML editing tool)

After extensive searching online, I have not been able to find a solution. What I need is a draggable input element within a textarea in a text-editable div. The draggable textarea should be integrated seamlessly into the text, and upon submitting, it shou ...

jqueryhtmltextarea

"Troubleshooting: Spring Boot application fails to load

I recently added some bootstrap templates to my resources/templates folder. However, when I start the server and navigate to the URL where I linked the index.html page, the bootstrap styling is not loading. Surprisingly, when I use the Chrome button in Int ...

htmlcssspring

Preventing text from wrapping around an image: tips and tricks

I've been struggling to prevent text from wrapping around an image on my webpage. Despite various attempts like enclosing the image and text in separate <div> elements, setting both the <img> and <div> to display as block, and even t ...

htmlcssword-wrap

What happens to the content within a <textarea> element if it is not enclosed between the opening and closing tags?

Here's a puzzling situation - I've entered the word Hello. into a <textarea>, and while I can see it on my screen, it doesn't show up between the opening and closing <textarea> tags. It may seem like a simple issue, but I'v ...

javascripthtmltextarea

Adaptable Navigation

I am currently working on creating a responsive navigation menu inspired by Bootstrap's design. However, I have encountered some challenges in implementing it. The current issue I am facing is that the navigation disappears when transitioning from a s ...

jquerycssnavigationresponsive-design

Issue regarding the carousel functioning on Bootstrap version 4.5.0

I am currently facing an issue with the carousel in the latest version of Bootstrap (4.5). I have set up a multiple item carousel by creating a grid inside it, where each item looks like this: <div class="carousel-item active"> < ...

htmlcssbootstrap-4carousel

Troubleshooting problem with the responsive dropdown menu in Bootstrap for mobile

I'm in need of some assistance with the mobile menu on my website. Whenever the STORE menu is clicked on the mobile version, it doesn't expand as expected, instead, it closes the general menu. Here is the link to the webpage. Any help would be gr ...

phphtmltwitter-bootstrapbootstrap-4

Adding columns dynamically to a table using ASP.NET Core 6

I am currently working on a project for my university, and I need to design a dynamic table with columns that can be added as needed. Each row should have a maximum of 4 columns before moving on to the next row and continuing the process until completion. ...

c#htmlasp.net-coreasp.net-core-mvc

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

javascripthtmlangulartypescriptrxjs

Verifying the accessibility of a website using JQuery/Javascript

I am attempting to use JavaScript to ping a website and display the result. Unfortunately, I have not had any success with this JSFiddle: https://jsfiddle.net/yyjowtru/ Although I believe I am close to achieving the desired outcome, changing the URL in t ...

javascriptjqueryhtml

Guide on how to save a collection of images from a website to a local directory with nodejs

I am looking to retrieve a folder of images and save them to my local directory. I have successfully downloaded a single image by specifying the image name, but I am unsure how to download multiple images at once. Below is the code I have used: var http = ...

javascripthtmlexpress

The web typography appears fuzzy or has incorrect thickness, lacks consistency across pages and even within a single page

The font (ProggyCleanSZBP.ttf from 1.1.5 release) appears to be intermittently thick and blurry. If you compare with , you'll notice that the latter displays as desired in most cases, but there are instances where the issue occurs, such as the first ...

htmlcssfonts