What is the best way to transition a div from the top to the bottom in mobile view?

Currently, I am utilizing Bootstrap 4 framework; however, if it operates effectively on version 3, then it should work seamlessly on v4.

Within a single column, I have incorporated 2 div elements as follows:

<div class="row">
    <div class="col-xs-12">
        <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
        <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
    </div>
</div>

My question is, can I arrange the order of these divs when viewed on a mobile device? It's crucial for me to accomplish this using only Bootstrap classes and ideally avoid utilizing JavaScript.

If achieving this with Bootstrap is not feasible, then I would appreciate any CSS-only solutions provided.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve this effect, CSS' flexbox can be utilized.

  • Create a new selector called .col-xs-12 with the following properties:
    • display: flex; instructs the children to utilize the flexbox layout
    • flex-direction: column-reverse; ensures that the children flow from bottom to top (opposite of default left to right)

View the below Snippet in fullscreen mode and adjust the window size to observe the rearrangement of elements.

@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}
<div class="row">
  <div class="col-xs-12">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

An Alternative Bootstrap Approach

This desired layout can also be accomplished using Bootstrap:

  • Incorporate the following classes into the container:
    • d-flex to enable flexbox for the container
    • flex-column-reverse to reverse the order of children on small screens
    • flex-sm-column to maintain the regular order on larger screens

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 d-flex flex-column-reverse flex-sm-column">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

Answer №2

I have found the perfect solution in the code below:

@media only screen and (max-width: 768px) {
  .xs-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12 xs-column-reverse">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

Answer №3

.col-xs-12 { height: 200px; position:relative; }
.col-xs-12 div { position:absolute; top:0; left: 0; width:100%; }
.col-xs-12 div:last-child { top: auto; bottom: 0; }

@media (max-width: 480px) {
    .col-xs-12 div { top:auto; bottom:0; }
    .col-xs-12 div:last-child { top: 0; bottom: auto; }
}

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

Selenium Webdriver is having trouble locating an element within an xblock

As a beginner in Python, Selenium, and coding in general, I'm not sure if my question even makes sense. My current project involves automating the task of saving edX course webpages as HTML. I am using the latest iPython and Webdriver for this purpos ...

pythonhtmlselenium

Are the stylesheets on my computer also applicable to Chrome?

For instance, an anchor tag by default has specific styles such as being blue, turning purple when visited, and changing the cursor when hovered over. So, where exactly does Chrome pull these styles from? Could there be a Google Chrome style-sheet stored ...

cssgoogle-chromebrowserstylesheet

Animate objects as they move along the page

Modern websites often incorporate animations into their designs. I had the idea to animate elements as we scroll down the page, using a combination of JQuery, HTML, and CSS. <div class="noanimate imgleft"> </div> <div class="noanimate img ...

jqueryhtmlcss

The use of HTML 5 Autofocus causes interference with CSS loading

Whenever I apply the autofocus="autofocus" attribute to an input element, it causes a brief glitch in Firefox. The content briefly appears without the CSS styling applied, resulting in elements not centered and headings rendered in default fonts. If I tak ...

csshtmlfirefoxautofocus

Setting up a responsive footer using Bootstrap and responsive design involves following a few key steps

Seeking assistance with making the footer of my website responsive using a combination of Bootstrap and custom CSS. I am aiming for a result similar to the examples shown below, both optimized for Desktop and Mobile platforms. Your help in achieving this ...

htmlcsswebbootstrap-4

Utilize Django to dynamically generate and display notifications with accurate rendering

Last week, I posted a question on Stack Overflow but unfortunately, I have yet to receive an answer. Upon further reflection, I realized that the root of the problem lies elsewhere. My current dilemma involves creating notifications for users and then disp ...

pythonhtmldjangourlnotifications

When using jQuery, the content loaded with the $ajax function only displays after refreshing the page

Located on an external server is a directory containing various .html files, including one named index.html. The server has the ability to load either the folder name or foldername/index.html in its URL. Each html file within the directory loads a corresp ...

javascriptjqueryhtmljsonajax

Yet another interactive JQuery feature found within the JQuery UI Tabs framework, utilizing seamless Ajax page loading

Currently, I am using JQuery U Tabs with Ajax Page Calls. In my Pages, I have a custom scroller that is functioning correctly. Additionally, I have an ajax search table that works when the page is loaded by itself in the browser but not when called within ...

javascriptjqueryhtmlcss

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react"; import ReactDOM from "react-dom"; var bImg = prompt("Enter the URL of the image you want to set as the background:"); const bStyle = { backgroundImage: "url(bImg)"; // The link is stored ...

javascriptcssreactjsjsx

"Unlocking the Power of mediaElementjs: Easy Steps to Accessing the Player Instance

I'm facing a small issue with the MediaElement.js player. To access the player instance, I usually use the following code (which works in HTML5 compatible browsers): // Retrieve player this.playerId = $('div#shotlist-player video').att ...

javascriptjqueryhtmlhtml5-videomediaelement

The initial menu option stands out due to its unique appearance, created using the :first-child

I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :f ...

htmlcsscss-selectors

Leveraging strings as URLs to embed PDFs in Wordpress using PDF Embedder

I'm encountering an issue related to a Wordpress plugin called PDF Embedder, as well as concatenating/using a string with document.write. My goal is to make this code work: <script src="http://nooze.org/wp-content/uploads/scripts/dateGetter.js"> ...

javascriptphphtmlwordpresspdf

Is there a way to prevent hover effects on the outer div when hovering over the inner div?

I am facing an issue with disabling hover effects on an outer div when hovering over an inner button. I have tried various methods but haven't been successful in achieving the desired outcome. .container { background-color: #e6e6e6; width: 400p ...

htmlcsshover

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

I am looking to showcase some TypeScript (angular code) as plain text on my website using prismjs. However, the Angular framework is executing the code instead. How can I prevent it from running? I have attempted enclosing it within pre and code tags wit ...

htmlangulartypescript

Creating a customized Paypal form with user-selected options

I want to make it easy for visitors to my website to pay through Paypal by simply clicking on a link that will take them directly to the checkout page. What I'm looking for is a way to provide basic options such as: Allowing users to enter their na ...

htmlcsspaypal

Refreshing a specific area on a webpage through the use of Ajax technology

I need to update a specific part of my webpage when a user clicks on the 'clear' button. I currently have some code that I borrowed from another answer I found on this site: $('.clear').click(function () { $.ajax({ url: "", ...

jqueryhtmlajaxrefresh

Deactivating the submit button after a single click without compromising the form's functionality

In the past, I have posed this question without receiving a satisfactory solution. On my quiz website, I have four radio buttons for answer options. Upon clicking the submit button, a PHP script determines if the answer is accurate. My goal is to disable t ...

javascriptphphtmlforms

Plotly Express Unleashes the Power of Subplots

After spending countless hours scouring the internet, I am feeling utterly frustrated and perplexed about how to deal with subplots using plotly express in Python. The concept is to create a line plot alongside a scatter plot and another line plot, where ...

pythonhtmlplotlysubplotplotly-python

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

javascripthtmlcssarrayslinux

"Enhance your design with a cutting-edge gradient button using CSS

While exploring gradient effects in CSS, I stumbled upon this unique button design. After extensive searching on the internet, I couldn't find a solution on how to recreate the same button effect using CSS. Is it possible to create it using CSS?Button ...

htmlcsssass