In Bootstrap 3, the first column in a row will be positioned on the bottom side when viewed on mobile

I have arranged two columns side by side.

    <div class="row">
      <div class="col-lg-2">
         I want this column to be at the bottom on mobile devices.
      </div>
      <div class="col-lg-8">
         I want this column to be at the top on mobile devices.
      </div>
   </div>

When viewing this on my laptop, they appear on the left and right sides respectively. However, when I access the page on my mobile phone, the first column is displayed at the top of the webpage.

I wish to rearrange the order, with the first column on the left side for laptops and at the bottom on mobile phones, instead of the current setup where it is on the left for laptops and top for mobile phones.

I only want to modify the view for mobile phones while keeping the layout intact for laptops.

csstwitter-bootstrap-3

Answer №1

Explore the detailed documentation on Bootstrap 3's grid system:

http://getbootstrap.com/css/#grid

If you have added the *-lg classes, it means you have specified how your page should appear on large screens only.

It is advisable to also incorporate the *-xs classes to define column behavior for smartphones. You may retain the *-lg classes as they are currently set.

In addition, Bootstrap offers *-push and *-pull classes for rearranging columns in different screen widths. Learn more about them here: http://getbootstrap.com/css/#grid-column-ordering

Answer №2

Include the class .pull-left in the larger div and .pull-right in the smaller div

<div class="row">
      <div class="col-lg-2 pull-right">
         Place this column at the bottom on mobile devices.
      </div>
      <div class="col-lg-8 pull-left">
         Place this column at the top on mobile devices.
      </div>
   </div>

This will align the second larger div to the left, bringing it to the top in the mobile view where .col-lg-8 is not used

Edit: This causes a gap between the two divs, because only 10 columns are being utilized

You need to adjust your html, check this http://jsfiddle.net/53u69ama/1/

<div class="row">
    <div class="col-sm-8 col-xs-12 ">
         Place this column at the top on mobile devices.
      </div>
      <div class="col-sm-2 col-xs-12 ">
         Place this column at the bottom on mobile devices.
      </div>

   </div>

Edit 2: You can also adjust the top position using the position style, but you'll need to set a static top for one div. Alternatively, you can change it dynamically with javascript.

Check this http://jsfiddle.net/53u69ama/2/

Answer №3

Here is the solution:

    <div class="row">
      <div class="col-lg-8 col-lg-push-2">
        Ensure that this column appears at the top on mobile devices.
      </div>
      <div class="col-lg-2 col-lg-pull-8">
        Make sure that this column is displayed at the bottom on mobile devices.
      </div>
    </div>

Answer №4

Feel free to utilize the following code snippet:

<div class="row">
    <!-- this section is visible if the view is smaller than lg (on top) -->
    <div class="device-xs visible-xs device-sm visible-sm device-md visible-md">
        <div>
            Content to display 2.
        </div>
    </div>
    <div class="col-lg-2">
        Content to display 1
    </div>
    <!-- this part is visible when the view is lg (on the right) -->
    <div class="col-lg-8 device-lg visible-lg">
        Content to display 2.
    </div>
</div>

Please make a note that you need to duplicate the text "Content to display 2." in the code.

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

The CSS styles are not being completely applied to the PHP function

My current task involves dealing with multiple folders containing images. When a link is clicked on the previous page, a unique $_GET variable is sent and processed by an if statement, triggering a function to search for and display all pictures within the ...

phpcssfunction

The align-items property in Flexbox is not functioning as expected when applied to Link components contained within

I'm in the process of creating a simple navigation bar using flexbox, but I'm encountering an issue where the content within the unordered list is not vertically centered. Below is the HTML code snippet: *,*::before,*::after{ margin: 0; ...

htmlcssreactjsflexboxnext.js

CSS media queries to exclude a property for mobile devices

I have a CSS class with the width property set to calc(100% - 17px). However, I want to ignore this property completely for devices with specific resolutions. I've tried using media queries and values like initial, inherit, and unset for the width pro ...

htmlcssmobilemedia-queries

Learn the steps for accessing and utilizing aria-label text in Google Chrome

Struggling with the aria-label attribute for blind users in Chrome. Can't seem to hear the aria-label text. Any insights on how aria-label behaves in Chrome or if I'm using the wrong approach? If I'm heading in the wrong direction or using ...

htmlcssgoogle-chromeaccessibilitymantine

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across: I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve th ...

htmlcss

Adjust the size of CSS boxes based on the window dimensions

I am facing an issue with two divs placed side by side. They appear fine when the page is viewed in full-screen mode. However, upon resizing the window, the right div overlaps the left one and causes a messy layout. . -I want to prevent these boxes fro ...

htmlcss

Enhancing text visibility in dompdf by making it bold or increasing its size

Recently, I began using dompdf v0.6.0beta3 along with the dompdf Codeigniter helper in Codeigniter. To address the issue of missing fonts, I manually moved the Arial font family tff files from the Windows 7 font folder to the /lib/fonts directory within do ...

phphtmlcsscodeigniterdompdf

Center an image and superimpose text in the middle of the webpage

I am attempting to center an image with text overlay in the middle of a page. Although the image is centered correctly, the overlay text remains off-center. Below is the code snippet. The text should be positioned in the top left corner of the image. &l ...

htmlcss

Steps for adjusting the width of the perfect-scrollbar:

I've implemented the perfect-scrollbar library from perfect-scrollbar. The documentation claims that the scrollbar is customizable, but I can't seem to find a setting for adjusting the width. By default, the scrollbar is only 8px wide: However, ...

jqueryhtmlcssperfect-scrollbar

Enhance your webpage by incorporating various icons and custom spacing using Font Awesome and CSS content

Utilizing Font Awesome icons can be done with the code snippet below: .icon-car { content: "\f1b9"; } Is there a way to include multiple icons (such as \f1b9 and \f1b8), separated by a non-breaking space? ...

cssfont-awesome

Should we combine social icons into a sprite image, or keep them separate?

Currently in the process of developing an HTML/CSS template, with plans to incorporate social media icons from the following source: These icons are available as 41 individual .png files. The goal is to integrate them into the template using CSS classes f ...

htmlcss

Is there a way to use CSS to prevent a user from being able to click on a table?

My CSS table appears standard: <table class="form grid"> <thead> <tr> <th>EId</th> <th>Number</th> ...

htmlcss

Connecting CSS styles and images to my EJS templates on a distant Express server using Node.js (Ubuntu 18.04)

I have been hunting for a solution here extensively, but every attempt has failed. So, here's the issue I'm facing: I have created a basic Express server locally to display a static page until I finish full integration. The structure of my site ...

cssnode.jsexpressejsbad-gateway

Tips for utilizing numerous tables with multiple selection tags

I am struggling with a jQuery issue involving multiple container elements with the class "product-sizes". Each container contains a select option for choosing between inches and centimeters, which triggers the corresponding table display. The problem arise ...

javascripthtmljquerycssforeach

My website experiencing issues due to Firefox 23.0.1 altering the CSS and causing disruptions

After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...

htmlcssfirefoxbackground-color

Activate the scrolling feature along the axis of the D3 graph

I'm working on a basic stacked bar chart and I need to incorporate a scroll bar on the axis. Currently, the scroll only appears for the div container due to CSS. Here's the code However, I'm looking to achieve something similar to this char ...

javascriptjqueryhtmlcssd3.js

Puppeteer challenge with breaking images

When generating a PDF from HTML, I am facing an issue where the signature image breaks on another page. Is there a way to ensure that if content or images break, they will move to another PDF page? Puppeteer version - 3.3.0 Node version - 12.16.1 Check t ...

htmlcssnode.jshandlebars.jspuppeteer

Customizing colors for the progress bar in Angular Material

In my Angular 5 project, I am using a material progress bar and hoping to customize the colors based on the percentage progress. Despite trying various methods from other sources (including previous SO questions), I have been unsuccessful in getting it to ...

htmlcssangularangular-material

Clicking on navigation does not close Bootstrap dropdown

When I use this code on my HTML page, the dropdown menu appears correctly. However, once I click a link, the menu does not close and remains open. How can I resolve this issue? <div class="col-lg-8 col-md-8 col-xs-2 accordion-menu"> <button t ...

javascripthtmlcssbootstrap-4

What is the best way to maintain the same height for a textarea and input fields?

What is the best way to align the message input field with the name and phone input fields? I need the height of the message input field to match the combined height of the three inputs on the left. It's crucial that the borders line up perfectly. I ...

htmlcsstwitter-bootstrap