Is there a way to divide text in one column and move it to another column on mobile and tablet devices?

Struggling with my bootstrap3 layout, I am attempting to shift content from one column to another on mobile and tablet screens. This adjustment is necessary so that the content appears under a specific heading or image in the adjacent column for optimal mobile user experience. The page's code is finalized, and now I am focused on enhancing the mobile display.

For a clearer idea of what I want to accomplish, please refer to this visual guide: Visual look

Currently, my plan involves duplicating the content and displaying it exclusively on mobile and tablet views while hiding the original column on these devices. However, I am concerned about potential performance issues due to increased page weight; does loading duplicated content affect mobile loading times? (I believe all content loads even when using @media queries.)

Do you think my approach is correct?

Even though the columns are not technically labeled as "col," Col-1 and Col-2 function similarly on larger screens. This portion of the grid structure illustrates the challenge I face regarding the two right columns displayed in the picture that need modification for mobile optimization.

<div class="row">

  <div class=col-md-8>
   All of the content from col-3 as per image
  </div>

  <div class="col-md-4>
   All of the content from col-4 as per the image
  </div>

</div>
htmlcssresponsive-designtwitter-bootstrap-3media-queries

Answer №1

Utilize multiple classes to adjust behavior based on screen size.

All the details can be found in the Bootstrap 3 grid section, but here is a sample setup for your scenario:

<div class="row">

  <div class="col-md-8 col-sm-12">
   Include all content from col-3 as shown in the image
  </div>

  <div class="col-md-4 col-sm-12">
   Incorporate all content from col-4 according to the image
  </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

Building HTML / XHTML files within a .NET console application utilizing writer classes

I am currently developing a reports library that involves generating HTML/XHTML reports from entity objects. While I have experience using XmlTextWriter to create XML files in the past, I don't think it's the most efficient solution for creating ...

asp.net.nethtmlxmlxhtml

What is the best way to switch back and forth between Bootstrap 5.1.0 modals?

I encountered an issue where the first modal remains visible when opening the second modal within the initial popup. Can anyone explain why this is happening? Furthermore, I noticed that the backdrop for the second modal is darker, indicating that it is s ...

javascripthtmltwitter-bootstrapbootstrap-5

Develop a JSON structure that represents an array of dynamically generated fields in PHP

Need help converting data from a PHP form into a specific JSON format. Struggling to create the right array that can be easily converted into JSON format. Here is a snippet of the array structure: Array ( [user_id] => [title2] = ...

phphtmljquerycssjson

Custom Bootstrap design layout where the right column wraps under the left column

Need assistance with my bootstrap layout. Prior to the 980px breakpoint, the right column wraps under the left column. I want it to remain in its position without wrapping. The challenge is ensuring the left column has a fixed width while allowing the ri ...

htmlcsstwitter-bootstrap

Elevating the table and row dimensions in Bootstrap

I'm currently working with Bootstrap 3 and I'm having trouble adjusting the height of my table and row. I've tried setting properties like line-height, but nothing seems to work. How can I increase the height? <style> div#descrip ...

htmlcsstwitter-bootstrap

A guide on cloning a div when clicked using jQuery

I'm looking to clone a div element after it when a button is clicked. I've come across solutions in vanilla JavaScript, but I really need a solution using jQuery as I struggle with it. Can anyone lend a hand? This is my current setup: <div c ...

javascriptjqueryhtmlcss

What is the best way to center align all elements using a wrapper in CSS grid?

I am working on designing a layout that looks like this: https://i.sstatic.net/jAaXL.jpg I have set the wrapper as a class and aim to center everything on the screen. Aside from the wrapper, I also want to make the text and form equal sizes. Here is th ...

htmlcsscss-grid

Issue with floating right navigation functionality

Hi there, I'm experiencing a minor issue with the navigation on my website. When I hover over the right side of the nav bar, the drop down menu shifts slightly to the right. All other elements in the nav are positioned absolutely... nav { pa ...

cssdropdown

Guide to adjusting the screen resolution on your iPad 3

Hello everyone, I'm fairly new to designing for the iPad 3. Could someone please provide some guidance on how to set media queries specifically for the iPad 3? Thank you in advance. ...

css

Display a pair of divs by utilizing the select option tag element alongside a submit button

Yesterday, I posted a similar question in a different format. Today, I am looking for the same question in a new format. Let me explain: I have several div elements on a page. When I choose an option from a dropdown menu and click submit, I want to disp ...

jqueryhtml

What could be the reason my Bootstrap 5 dropdown menu is not functioning correctly?

As of late, I've delved into web development and have been utilizing Bootstrap v5.0 for creating a website. The code below is from a file named "grage.php": <!-- HERE SHOULD BE THE CODE OF GARAGE --> <div class="container-fluid" ...

htmlcssbootstrap-4bootstrap-5

Unique background image for every individual page

For my mobile app development using Jquery Mobile, I have implemented a custom theme but now want to vary the background images for different sections. My current code looks like this: .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { ...

jqueryhtmlcssjquery-mobilebackground-image

Hover over elements in jQuery to smoothly transition them from one class to another

Is it possible to achieve this? For example: .class1{ background-image:(whatever.jpg) color: #fff; } .class2{ background-image:(whatever2.jpg) color: #999; } Can I create a fade effect for all elements with class1 to class2 when the mouse hover ...

jquerycsseffectsfadeinjquery-effects

Sleek Dialog Boxes with Bootstrap 4 - Bootbox Modal

Within the structure of my webpage, there resides a table containing various elements. One specific cell within this table holds a link that triggers jQuery scripts upon being clicked. An example action initiated by clicking this link is displaying a Boots ...

javascriptjqueryhtmlcssbootstrap-4

"Use jQuery to seamlessly alter the CSS clip-path property for smooth transitions

I have an element that utilizes css clip-path. By using jquery, I am able to adjust the clip-path points based on the cursor's X-coordinate position. While my code functions well, I am looking to add a smoother and slower transition to this "animatio ...

jquerycssmousemoveclip-path

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

What is the rationale behind storing animation settings in two distinct object literals within TweenMax?

While going through this Codepen, I came across the following code: var tmax_options = { repeat: -1, yoyo: true }; var tmax_tl = new TimelineMax(tmax_options), tween_options_to = { css: { transform: 'scale(0)', ...

javascriptcssgsap

Achieve a sleek, modern look by using CSS to add a border with crisp square

Hello everyone, I'm currently attempting to add a border to only one side of an a element. However, when I add the border to just one side, it creates a sharp diagonal edge: https://i.stack.imgur.com/pAqMM.png My goal is to eliminate the sharp edge ...

htmlcss

Are you experiencing issues with Font Awesome Fonts failing to load?

I am currently using a rails app with bower to manage my assets, avoiding gems for JS and CSS. In the directory vender/assets/stylesheets, I have "font-awesome" containing both scss and fonts. In app/assets/stylesheets/application.scss, I have included va ...

htmlcssruby-on-railsfontsfont-awesome

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

jqueryhtmlcssforms