Move column position within an HTML table

Can someone help me with this code snippet?

<div class="row">
<div class="col-xs-12">
  <div class="col-md-6">
    <div class="col-sm-7">
        Content B
    </div>
    <div class="col-sm-5">
        <img src="https://www.ipbrick.com/wp-content/uploads/2013/12/cloud.png" />
    </div>
  </div>
    <div class="col-md-6">
      <div class="col-sm-5">
          Content A
      </div>
      <div class="col-sm-7">
          Content C
      </div>
    </div>
</div>
</div>

This code snippet is currently displayed as follows:

desktop

----b----|--d--|--a--|----c----

mobile

b

d

a

c

However, I would like it to appear in mobile mode like this:

d

b

a

c

I have tried reading this article for help, but I am still struggling to understand. Can anyone provide some clarification?

htmlcssbootstrap-4

Answer №1

If you are looking for a way to structure your code using flex, here is a solution that might work for you. Just remember to enclose the code within a media query like @media all and (max-width:767px) or any other desired parameters.

.col-row{
display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    }
    /* use the below code under mobile media query */
     .col-b {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
.col-row img{
width: 30px;
}
.col-xs-12 {
    text-align: center;
}
  .col-row {
    align-items: center;
}
  .col-d {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  @media all and (max-width:320px){
  .col-row {
    align-items: center;
}

  }
<div class="row">
<div class="col-xs-12">
  <div class="col-md-6 col-row">
    <div class="col-sm-7 col-b">
        Content B
    </div>
    <div class="col-sm-5 col-d">
        <img src="https://www.ipbrick.com/wp-content/uploads/2013/12/cloud.png" />
    </div>
  </div>
    <div class="col-md-6">
      <div class="col-sm-5">
          Content A
      </div>
      <div class="col-sm-7">
          Content C
      </div>
    </div>
</div>
</div>

Answer №2

To create a unique layout on desktop and mobile devices, try swapping the B and D columns in your HTML code. Utilize Bootstrap CSS classes to push and pull the columns so they display differently on desktop screens and then revert to their original order on mobile:

<div class="row">
    <div class="col-xs-12">
        <div class="col-md-6">
            <div class="col-sm-5 col-sm-push-7">
                Content d
            </div>
            <div class="col-sm-7 col-sm-pull-5">
                Content B
            </div>
        </div>
        <div class="col-md-6">
            <div class="col-sm-5">
                Content A
            </div>
            <div class="col-sm-7">
                Content C
            </div>
        </div>
    </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

When using Italics, the conflict arises between the specified line-height and the actual height of the

Recently, I encountered an issue that has me a bit perplexed: I have a span element with line-height set to 18px and font-size at 16px. Everything works perfectly when the text inside is regular; the height of the span remains at 18 pixels. The problem a ...

firefoxhtmlcssitalics

Implementing a smooth transition effect, such as opacity or fade-in, on an image retrieved from an

I am struggling to achieve opacity with a transition on an image after clicking and changing the photo. I have created a basic slider that displays pictures from an array. How can I smoothly transition the opacity of the image from 0 to 1 over a duration ...

javascriptcsshtmlslider

Using query strings to manipulate the URL of an iframe and add additional information

I am facing a challenge with integrating my legacy perl application into an MVC application. I have set up a structure where the legacy application is loaded into an iframe within default.aspx, but I need to capture the URL of each page within the iframe a ...

javascripthtmlasp.net-mvcperliframe

Sharing CSS styles among multiple single-page applications (SPAs) developed using the React

I am currently working on multiple micro SPAs that exist independently within an Express environment. I am facing a challenge with importing a global CSS file that is located outside of the apps, as it is not being recognized. The use of @import url(asset ...

javascriptcssreactjsexpress

Including the file path to an image in a CSS module within a React component from the public directory

I'm currently facing a challenge with adding an image as a background, especially since the image is located in a public folder structure like this: -public -images -image.png -src -assets -components -index.tsx -index.module.css (I want to use the ...

javascriptcssreactjstypescriptreact-tsx

What steps should I follow to produce animation in my specific situation?

I've been attempting to implement a transition for my elements, but the examples I've come across all rely on the :hover state. What I really need is for the transition to activate when I click a link. Here's my HTML: html <a id=' ...

jqueryhtmlcssanimation

Adjust the height of an element when the maximum height is set to none

I am trying to add animation to the opening of a menu on my website. This is achieved by adjusting the max-height property of the <div> element that represents the menu, as well as changing the display property. The max-height value is being changed ...

htmlcss

Struggling to display flex items in a full-width row on a new line

Here is a code snippet where I am trying to display "0 of 2 completed" on a new line at full width. I have used flexbox for this purpose, but I am facing challenges. Can you suggest a better approach to achieve this? .container { display: flex; widt ...

htmlcssflexbox

I'm facing a problem with the margin and display setup in my assignment

I am encountering a bit of confusion regarding the margin when implementing the following code: Section { background-color: #FFFFFF; width="100%"; } p1 { font-family: Roboto; font-size: 22px; font-height: 1px; margin-top: 45px; margin-lef ...

htmlcss

Toggling CSS in Vue with a button and a checkbox

I'm currently working with VueJS and here is the CSS code I have: .button-css { align-items: center; background-color: var(--azure-radiance); border-radius: 30px; display: flex; height: 50px; min-width: 200px; padding: 0 60px; } .opensans-bold ...

cssvue.jscheckboxtogglebutton

Trouble with displaying list bullets in jQTouch framework

I'm currently experimenting with jQTouch for a web app designed for iPhones. However, I am facing an issue where I want the content on the pages to display normal bullet lists instead of being styled as bars in the jqt theme. To achieve this, I am att ...

cssjqtouch

The menu icon in the Bootstrap 5 navigation bar is not functioning on a specific webpage

I am facing an issue with my menu icon not working properly on mobile devices or when I try to inspect the page and run it on a responsive device. How can I resolve this problem so that users can click on the menu icon to view the navigation items? &l ...

cssbootstrap-5

Is it possible to retain the placeholder text if the user selects the input field and the value is left empty?

Is there a way to make the placeholder text disappear only when the user starts typing at least one character in the input field? Currently, the placeholder disappears as soon as the user focuses on the input. Any suggestions would be appreciated. Thank ...

javascriptjquerycssplaceholder

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

htmlcssvuetify.js

How to customize the color of Navbar pills in Bootstrap 4 to fill the entire height

Is there a way to ensure that the background of nav-items is completely filled with color rather than just partially? I attempted to use Bootstrap pills, but it did not achieve the desired effect. I also experimented with my own CSS, but encountered simil ...

javascripthtmlcssbootstrap-4twitter-bootstrap-4

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb contain ...

javascripthtmlcssreactjs

What steps should I take to ensure that the login page functions properly?

Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Pag ...

javascriptphphtmlcssauthentication

Using variables with Tailwind arbitrary values is not supported

Why is it that in tailwind, bg-[#5ad0a1] works but assigning the hex value to a variable such as const color = '#5ad0a1';, and then using bg-[${color}] does not work? <span className={`inline-flex items-center rounded-md bg-[${color}] px-2 py- ...

cssreactjsmaterial-uitailwind-css

What is the method for locating all anchor tags "In General" within the inner HTML of a div using XPath?

This query is related to a discussion on anchor tags in this thread. I am interested in identifying all anchor tags within a string. The scenario provided below is similar to the aforementioned issue, however, I aim to accomplish this using xpath and angu ...

javascripthtmlxpath

Troubles with horizontal list incompatibility in Internet Explorer 6 and 7

I am facing an issue with displaying an unordered list in IE6+7. The problem arises when styling the list items with specific width and height properties, causing IE to stack the items vertically instead of horizontally. Below is my code snippet: For live ...

htmlcssinternet-explorer-7internet-explorer-6