Move the first column to the right using BS4

Currently, I am working with bootstrap4 and facing an issue where I need the first div column to float right on medium devices and above. However, on mobile devices, it should be shown first. This was easily achievable in bootstrap3 using a structure like the one below. But with bootstrap4 now utilizing flexbox, it doesn't seem to work as expected. Does anyone have any suggestions on how to achieve this layout?

<div class="row">
    <div class="col-12 col-md-8 float-right">
         //DISPLAY RIGHT BANNER HERE
    </div>
    <div class="col-12 col-md-4">
        //INCLUDE SOME CONTENTS
    </div>
</div>
cssbootstrap-4

Answer №1

No need for additional CSS.

Bootstrap 4 utilizes display:flex in the row, so you can simply use d-md-block (changing to display:block on md and up) to override the default display:flex. 

<div class="row d-md-block">
    <div class="col-12 col-md-8 float-right">
         //DISPLAY RIGHT BANNER HERE
    </div>
    <div class="col-12 col-md-4">
        //SOME CONTENTS
    </div>
</div>

https://i.sstatic.net/4A7tf.png

Visit this link for more information: https://www.codeply.com/go/jjs8RFfwpX

Answer №2

The .row class is set to display:flex; by default, but you can use !important to override this behavior.

.row{display:block!important;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-12 col-md-8 float-right">
         //RIGHT BANNER HERE
    </div>
    <div class="col-12 col-md-4">
        //SOME CONTENTS
    </div>
</div>

Note: view full size output for better understanding

Answer №3

The structure of the HTML in this example is a bit unusual, as both containers are using col-12. To ensure that the banner stays on the right without floating around, you could adjust your HTML as follows:

Consider updating your code to something like this:

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-8 col-md-10 main">
        // CONTENT HERE
    </div>
    <div class="col-4 col-md-2 banner">
        // RIGHT BANNER HERE
    </div>
</div>

Feel free to try this out and let me know if it works better for your needs.

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

Guide to center-aligning ElementUI transfer components

Has anyone successfully incorporated ElementUI's transfer feature inside a card element and centered it? https://jsfiddle.net/ca1wmjLx/ Any suggestions on how to achieve this? HTML <script src="//unpkg.com/vue/dist/vue.js"></ ...

javascriptcssvue.jselement-ui

Tips for adjusting the dimensions of an SVG background within an element using the gulp-svg-sprite npm package

My current project involves the use of an NPM package called gulp-svg-sprite, which consolidates all my SVG images into a single file named sprites.svg and also generates sprites.css. Within the sprites.css file, there are CSS classes that define their ba ...

htmlcsssvggulp

What is the best way to make a sliding DIV appear at the edge of the browser window?

I recently came across a really interesting effect on a webpage. After arriving on the page, a slide-in window appears after about a minute. It slides in from the right side, remains at 250x180 for around ten seconds, then shrinks to 250x50 and stays visib ...

jquerycss

An illustration using Bootstrap 5: Cover page design featuring a fixed-top navigation bar and smoothly scrolling content

Struggling with customizing the bootstrap 5 cover page example. I really love the design, especially the header and footer (without toggle, brand staying on a single line, etc.). Want a page with more content scrolling in the middle, while keeping the nav ...

htmlcssbootstrap-5

Update the button text after it has been clicked

https://i.sstatic.net/QJALK.png In my code, I have a function that generates bootstrap rows, each containing an input field, textarea, and a remove button. As I call this function multiple times, I end up with several bootstrap rows. When clicking on the ...

javascriptjqueryhtmlcssbootstrap-4

What is the best way to showcase the current element using jQuery?

I have this example: link HTML CODE: <div class="common-class"> <div class="trigger"> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="show"></div> </div&g ...

jqueryhtmlcss

What is the best way to format table values as currency?

Still getting the hang of Javascript, and I'm in the process of learning... Currently, my challenge involves calculating the total sum of values within a Bootstrap 4 table and formatting the result as currency (specifically in USD format). While I&ap ...

javascripthtml-tablebootstrap-4sum

I am experiencing an issue where the close button image on tap is not closing on the first tap on

Why does the page close on the second tap instead of the first tap when using an iPhone? The image changes on tap but doesn't close as expected. $("#privacy-close-btn").mouseenter(function() { $("#privacy-close-btn").css("display", "none"); $(" ...

jqueryhtmlcssiphone

Is it possible to replicate a slow image loading experience in React.js?

Referenced the solution below How to simulate slow loading of image Slowing down internet connection with Chrome DevTools works, but the entire site loads slowly. I want to specifically focus on slowing down the image reloading. One of the suggestions w ...

javascriptcssreactjs

The issue of assigning Ajax data to jQuery inputs with identical classes is not being resolved correctly

I am currently developing an Invoicing System where the Rate(Amount) value changes automatically when the Product(Item) is changed. The issue I am encountering is that when I change the first Product, all the other Product Rates change to the Rate of the ...

javascriptjqueryhtmlcss

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

Issue with the rendering of Navigation Bar in Angular 4 Bootstrap alpha

I am currently working on integrating Bootstrap 4 into my Angular 4 application by following a tutorial. However, I have encountered an issue with the navigation bar not functioning correctly. https://i.sstatic.net/92phM.png After taking the necessary st ...

angularbootstrap-4

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

Adjust the background color of a non-selected Material-UI checkbox

Currently, I am working with a combination of React-Redux and Material-UI to style my project. Within this setup, I have a checkbox component that is placed on a toolbar with a blue background color (#295ED9). So far, I have successfully altered the color ...

cssreactjscheckboxreact-reduxmaterial-ui

Is it feasible to have fixed headers adopt the width property?

Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the ...

htmlcsshtml-tablewidthfixed-header-tables

Issue with negative z-index in modal window has not been resolved

I'm currently trying to customize the radio button using my own CSS styles, but I've encountered an issue. For some reason, setting the z-index to -1 is not working when the radio button is within a modal. Below is the code snippet that I am wor ...

javascripthtmlcss

The central navigation system of the Owl Carousel

I am currently using the owl carousel plugin and I am struggling to figure out how to center align the navigation vertically while also using the autoHeight option. http://codepen.io/anon/pen/jJAHL I have attempted the following code snippet, but it seem ...

jquerycssowl-carousel

Store <td> in a variable

At the moment, I have a script that allows users to input an item name, along with its size, color, and other options. Each of these entries is saved as individual items with their custom specifications, such as a black t-shirt in large size. The script c ...

javascriptjqueryhtmlcssjquery-ui

Exploring the dynamic animation of jQuery slideDown with the layout manipulation of

My current project involves using an HTML table with multiple rows. I have hidden every second row, which contains details about the preceding row, using CSS. Upon clicking the first row, I am utilizing jQuery's show() function to display the second ...

jqueryhtmlcssuser-interface

Combining CSS and JavaScript to handle two events with a single onClick

Here is the code I've created: <a href="#" id="home" class="showLink" onclick="showHide('example');return false;"> <li class="buttons">home</li> </a> <a href="#" id="user" class="showLink" onclick="showHide(&a ...

javascripthtmlcss