Reorder columns according to the device type

Seeking advice on reordering content based on user device.

Preferred order for mobile:

A

B

A

B

Preferred order for PC:

A B

B A

Attempts made so far:

<div class="row">
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
</div>
<br><br>
<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content A
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content B
    </div>
</div>

Encountering issues with the second row layout. Unsure how to resolve it. Any suggestions on the best approach to tackle this?

htmlcssbootstrap-4col

Answer №1

Look no further for the solution, I believe I have found it for you. Give it a try:

<div class="row">
    <div class="col-md-5">
        Content A
    </div>
    <div class="col-md-5">
        Content B
    </div>
</div>
<br><br>
<div class="row">
    <div class="col-md-5 order-md-1">
        Content A
    </div>
    <div class="col-md-5 order-md-0">
        Content B
    </div>
</div>

Remember, the effect will not be visible in the code snippet. You must test it in a browser to see the changes.

Answer №2

I came up with a solution, but I'm not sure if it's the most efficient method:

<div class="row">
    <div class="col-sm-5 order-sm-0 order-lg-1">
        Section A
    </div>
    <div class="col-sm-5 order-sm-1 order-lg-0">
        Section B
    </div>
</div>
<br><br>
<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Section A
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Section B
    </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

Hover over a row in one table to modify the appearance of another row in a different table

Is there a way to change the appearance of rows in one table when hovering over rows in another table that are related? You can find a JSFiddle link illustrating what I am trying to achieve. Here is an example of the code: table#table1 #el1:hover + ta ...

htmlcss

How can I use JQuery to select an element with a style attribute in Internet Explorer?

When using JQuery, I have set my target to be the following: <li style="margin-left: 15px;">blah<li> I am using this code to achieve that: $(".block-category-navigation li[style='margin-left: 15px;']").addClass('sub-menu' ...

jquerycssinternet-explorerjquery-selectorstarget

Where should you incorporate Jquery within a PHP-heavy webpage?

I'm struggling to get my script working correctly on a page I created. It's a paginate script that links to the "newsblocks" class. Where should I place the script for it to function properly? <?php /* Template Name: [Newspage] */ get_heade ...

phpjqueryhtml

What is the best way to duplicate this content from a picture using CSS?

Trying to replicate text in an image using HTML and CSS. Wondering if there's a better way than setting each line with its own font size. Here's the image I'm working on: https://i.sstatic.net/bMPhy.png Current issues with the approach: ...

htmlcssbootstrap-4

The switch switches on yet another switch

Greetings everyone, Currently, I am in the midst of my exam project and creating a mobile menu. The functionality is there, but unfortunately, when closing the menu, it also triggers the search toggle which displays an unwanted div, becoming quite botherso ...

javascriptjqueryhtmlcss

If the overflow-x property is set to hidden for the html and body elements, the links in the footer will become unclickable as they will

Situation: Consider the following scenario with a simplified HTML example: position the footer behind the content and make it stick to the bottom when reaching the end of the page, the footer should slide up from behind the content I achieved this layo ...

htmlcssz-indexfootersticky-footer

PHP and issues with search functionality

I am currently working on developing a search function to retrieve and display data from a MySQL database based on user selection. However, I encountered an error that I am not sure how to resolve. Can anyone provide assistance? I am fairly new to PHP. The ...

phphtmlmysqldreamweaver

Observe the input value that has been entered

Currently, my task involves: Inserting an email address into a form and having that email appear in the following <div class="your-mail"></div> tag Here is the existing HTML code: <div class="wrap"> <main> ...

javascripthtml

Develop a custom script function for every instance of a @foreach loop

I have a challenge where I need to style automatically generated table rows by clicking on a button. Currently, my code appears as follows: @foreach($tours as $tour) <tr id="{{$tour->id}}"> <td> {{$tour->tournr}} &l ...

javascripthtmllaravel

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

htmlcss

The sliding hamburger menu children fail to move in unison with the parent

I'm currently working on a dynamic sliding navigation menu that activates when the hamburger icon is clicked. However, I am facing an issue where the child <a> elements are not sliding along with the parent div. You can see how it currently loo ...

htmlcssreactjstypescript

What is the best method for gathering information from multiple input fields?

I'm currently working on developing a Polymer application that includes a search button with multiple input boxes. I want the search operation to consider all the inputs from these boxes when performing a search. Here is an image depicting the scenar ...

javascripthtmlcsspolymerpolymer-1.0

Easily move elements using a jQuery click animation

Having trouble animating a div's top position by -130px to move it off screen? Can't figure out why it's not working? I'm fairly new to jQuery/Javascript. I have a button/hyperlink with the ID #NavShrink. When clicked, I want the div # ...

javascriptjqueryhtmlcssjquery-animate

CSS: Obtain a button and align it to the "a" element

Feeling a bit puzzled: https://i.stack.imgur.com/S7xKh.png In the image, there's a span button labeled "Navigation einblenden", and a span a tagged as "Suche". Despite styling them identically: In the CSS snippet, dispOpts is the parent span's ...

htmlcss

How to align Material UI's <TextField> component in the middle of a React project

I'm struggling to align two <TextArea> components using material ui and React. Both of them are contained within the same <div> and share the same className. Despite trying to apply the !important rule in CSS, I haven't been able to ...

cssreactjsmaterial-ui

Trouble retrieving key value in HTML with Angular and Firebase

When trying to access the key of an object in my database to navigate to a URL based on it, I am finding that the p.$key value is always undefined. service: getAll(){ return this.db.list('/products').valueChanges(); } component: product ...

htmlangularfirebase-realtime-databaseangularfire2

Is there a glitch in the Bootstrap v4 Navbar?

Encountering an issue with the default navbar example from Bootstrap's official website. The navbar is supposed to be full-sized and collapse when the screen size decreases. However, after implementing the code into my project, it appears as always co ...

jqueryhtmlcssbootstrap-4twitter-bootstrap-4

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...

javascripthtmlcssnpmchart.js

Arranging shapes for varying levels of magnification

Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...

htmlcssformspositioning

Ways to incorporate gentle page breaks into an HTML document

My task involves creating an XSL script to analyze various XML files that share a similar structure. The aim is to parse these XMLs and transform them into HTML pages. For longer XML documents, I want the resulting HTML page to be paginated (meaning the pa ...

htmlcssxslt