Issue with aligning columns to the right in Bootstrap 4

Currently, I am utilizing Bootstrap v4.0.0-alpha.6

In a single row, I have three columns displayed and I am looking to swap the first column with the last column specifically in md screen size but not in sm/xs.

Here is how I envision it in desktop mode:

[C][B][A]

and this is what I want for mobile view:

[A]
[B]
[C]

I attempted to achieve this using the following code snippet:

<div class="row pt-2">
    <div class="col-12 col-md-4 float-md-right">
        <img src="assets/img/3-delivery.jpg">
    </div>
    <div class="col-12 col-md-4">
      <img src="assets/img/arrow.png">
    </div>
    <div class="col-12 col-md-4 float-md-left">
      <img src="assets/img/4-served.jpg">
    </div>
</div>

Unfortunately, the above code did not produce the desired outcome.

Answer №1

Remember to utilize the push and pull classes for alignment.

<div class="row pt-2">
        <div class="col-12 col-md-4 push-md-8">
            Apples
        </div>
        <div class="col-12 col-md-4">
            Bananas
        </div>
        <div class="col-12 col-md-4 pull-md-8">
            Carrots
        </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

Creating a responsive grid layout with HTML and CSS

Is there a way to adjust the grid layout so that the second row of blocks align just below the corresponding block above instead of creating an entirely new row? http://jsfiddle.net/AndyMP/wSvrN/ body { margin-left: 0px; margin-top: 0px; marg ...

Eliminate gaps created by grid rows by incorporating elements of varying heights

This is the standard format of the page: * { margin: 0; padding: 0; } img { width: 100%; float: left; } #grid { display: grid; grid-template-columns: repeat(3, 1fr); } #test-one { grid-column-start: 1; grid-column-end: 2; width: 100 ...

Why is the div element within the container not automatically occupying 12 columns, but rather only 1?

I'm struggling to comprehend the bootstrap grid system, as explained in Murach's .Net book. Please take the time to read through the entire post. I am aware of the solution (<div class="col-lg-12">Col x</div> works), but I am curious ...

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

Utilize flexbox for text wrapping while preserving the proportionate column width for varying text lengths

I'm currently working on a Wordpress site, incorporating flexbox into my design. I have set up two columns where child 1 should occupy 75% of the page width and child 2 should take up 25%. However, I've noticed that when the content in child 1 is ...

Adding a class to a clicked button in Vue.js

A unique function of the code below is showcasing various products by brand. When a user clicks on a brand's button, it will display the corresponding products. This feature works seamlessly; however, I have implemented a filter on the brands' lo ...

The background image does not appear to be displaying correctly on GitHub pages

I've encountered an issue where my svgs are not displaying as background-image or background on GitHub pages, even though they work fine locally. I utilized sass as a preprocessor for css, in case that detail is helpful. If anyone has insights on how ...

"The issue with the nested nth-child property is that it only affects the first element it is applied to

Having trouble with the nth-child property. The issue lies with the #subnav element. I'm unsure why nth-child isn't working as expected (supposed to change border color and width). Here's the problem and code snippet : <div class=" ...

What is the process to include a CSS file in PHP?

Can anyone guide me on how to include my CSS file in PHP? require('config.php'); $cssFile = "style.css"; echo "<link rel='stylesheet' href='/books/style.css'>"; What is the process of adding CSS to a PHP appl ...

What is the best way to assign an ID to the initial table header in an asp:DataGrid for CSS styling purposes?

I am looking for a way to customize the first element in the table headers row using CSS without relying on :first_child selector. Example Code: <asp:TemplateColumn HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"> <Heade ...

Style the content in the TD to be aligned to the left only when an INPUT element

Can CSS be used to left-align the contents of a TD cell when it contains an Input? Specifically, can the Input itself be left-aligned? <td> <input ....Left Align Me... /></td> ...

Creating a spinning Cube with separate fields for x, y, and z rotation speeds: a step-by-step guide

After dabbling in Java, Visual Basic, HTML, and CSS, I'm now looking to create an interface featuring a central spinning cube with 3 fields to control its x, y, and z rotation speeds. Can you suggest which language would be the best fit for this proje ...

Text not centered evenly on the page

My goal is to center my "Jumbotron" at the top, with my picture on the left and carousel on the right. However, all my content keeps floating to the left. Despite using Bootstrap 5 with flexbox, I can't seem to get everything centered properly. Check ...

How can I make Nav-tabs align vertically on small screens?

I'm struggling to figure out why my .nav .nav-tabs are not stacking vertically even when I am using flex-sm-column. It's frustrating me a lot. Any ideas on what might be causing this issue? <html> <head> <link rel="stylesheet" h ...

Is it possible to create a masonry-style layout with two columns that is responsive without

Is there a way to organize multiple divs of varying heights into two columns that display immediately one after the other, without relying on JavaScript or libraries like packery or masonry? I've experimented with using display: inline-block in this ...

Using Node JS to serve an HTML file along with cascading style sheets

As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...

The act of resizing a window causes the text to be forcibly expelled from its containing div

When you hover over an image in a grid, text and a button appear. However, when the window is resized, the content ends up overflowing out of the div. This issue is part of my first project that I am working on during a bootcamp. I have decided to keep th ...

Unlock the power of automatic code reloading in Rails with these simple steps

Looking for a way to implement 'hot code reloading' in a development Rails application? Let's say you're working on a Rails project and make changes to a stylesheet. Currently, you have to refresh the page using cmd-r or by clicking th ...

In the mobile view of the jumbotron, there is a noticeable blank area on the right side

I've searched high and low for a solution to this issue, but nothing seems to pinpoint the cause of the problem. The white space that's causing trouble is evident in the following image: https://i.sstatic.net/95Rh6.jpg Could you help me identif ...

Quantify the Proportion of Affirmative/Negative Responses and

I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...