What is the best way to display div table data in the correct order on mobile devices using Bootstrap 3?

Currently, I am utilizing Bootstrap3 and have implemented the code below. While it displays correctly on my desktop, the issue arises when viewed on a mobile device as the text is not grouped properly.

My desired mobile view should look like this:

  • Header 1
  • Detailed description text for Header 1
  • Header 2
  • Detailed description text for Header 2

However, the actual mobile view displays like this:

  • Header 1
  • Header 2
  • Detailed description text for Header 1
  • Detailed description text for Header 2

Below is the div code that I have set up:

<div class="row">
    <div class="col-sm-6 clearfix text-left">
        <p>Header 1</p>
    </div>
    <div class="col-sm-6 clearfix text-left">
        <p>Header 2</p>
    </div>              
</div>      
<div class="row">
    <div class="col-sm-6 text-left">
        Detailed description text for Header 1
    </div>
    <div class="col-sm-6 text-left">
        Detailed description text for Header 2
    </div>
</div>

Thank you!

htmlcsstwitter-bootstrap-3html-table

Answer №1

If you're unsure about the desired appearance, consider organizing everything into columns. Here's an example:

<div class="row">
    <div class="col-sm-6 text-left">
      <p>Title 1</p>
      <p>Description for Title 1</p>
    </div>
    <div class="col-sm-6 text-left">
      <p>Title 2</p>
      <p> Description for Title 2</p>
    </div>              
</div>

Experiment with this layout on http://codepen.io/anon/pen/eZOpKx

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

Create a personalized preview image using specified parameters

Whenever I share a link to a specific location on Google Maps, the preview image of that location automatically appears, as shown below: https://i.stack.imgur.com/waBnb.png I have some knowledge about adding a preview image using the <meta> tag in ...

htmlmetapreview

Optimal method for creating a seamless loop of animated elements passing through the viewport

My challenge involves managing a dynamic set of elements arranged next to each other in a row. I envision them moving in an infinite loop across the screen, transitioning seamlessly from one side to the other, as illustrated here: https://i.stack.imgur.com ...

javascriptcssanimationgraphicsgsap

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

javascripthtmldom

Something is amiss with the PHP email validation functionality

I have been facing issues with the functionality of my form that uses radio buttons to display textboxes. I implemented a PHP script for email validation and redirection upon completion, but it doesn't seem to be functioning correctly. The error messa ...

javascriptphpjqueryhtmlcss

Explore our product gallery with just a simple hover

I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...

javascriptjqueryhtmlcss

Utilizing Jquery to enhance slide image transitions with navigational links

As a newcomer to jQuery, I am attempting to create a slider using jQuery. Here is the script I have so far: $(function() { var bgCounter = 0, text = [ 'some html code here', 'some html code here', 'some ...

javascriptjqueryhtmlcssslide

Overlaying a div on top of an iframe

Struggling to make this work for a while now. It seems like a small issue related to CSS. The image isn't overlaying the IFrame at the top of the page as expected, it's going straight to the bottom. Here is the code snippet: .overlay{ width: ...

javascriptjqueryhtmlcssiframe

Accessing getUserMedia within Internet Explorer 11 or utilizing MediaStream on IE 11

I am attempting to utilize the getUserMedia function in IE 11 with the help of the temasys plugin. However, IE does not support the MediaStream instance returned by getUserMedia. Below is a snippet of my code: import React from 'react' import { ...

javascripthtmlreactjsinternet-explorer-11temasys

The CSS transition will only be triggered when the class is turned on, not when it is turned off

Having some trouble with a transition effect involving multiple elements on a page. Specifically, I am working on a sliding side menu for the responsive top navigation menu. The goal is to have the relative body and a fixed header bar move to the right whe ...

jquerycsscss-transitions

Enclose a pair of divs within a fresh div wrapper for better organization

Imagine you have the following: <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv" ...

jqueryhtml

What are the disadvantages of not incorporating the main CSS file directly into the web page?

Optimizing the loading time of my webpages is a priority for me, especially when it comes to first-time loading and from cache. Despite that, I still prefer to have the browser re-validate all resources to avoid any strange displays or update issues caused ...

htmlcsshttpcachingwebserver

Tips for altering the class of an HTML button dynamically when it's clicked during runtime

I currently have a set of buttons in my HTML page: <button id="button1" onclick="myFunction()" class="buttonClassA"></button> <button id="button2" onclick="myFunction()" class="buttonClassA"></button> <button id="button3" onclic ...

javascriptjqueryhtmlcssajax

When a CSS fluid layout includes a containing div with margin or padding, it may lead to

On my jsfiddle , the outermost wrapper div has a width of 100%. I am trying to create an inner div (tb_margin or tb_padding) where the content starts 40px from the left. I have attempted to use both margin and padding for this left spacing, but in both cas ...

htmlcssboxlayout

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

htmlcssflexbox

JavaScript for Dynamic Scaling Animations

I am currently working on animating an SVG button and I am trying to incorporate the transform property with a fadeout using opacity attributes in Javascript. This is how I have attempted to write the code: (Starting with opacity 0 and scale 0) (I am awa ...

javascriptcssattributestransform

What is the best way to display an alert when the button is clicked repeatedly?

Is it possible to keep displaying the alert every time we click the button, rather than just once after clicking it? I currently have an alert set to trigger when a button is clicked, but it disappears after 3 seconds. How can I make it show up again with ...

javascriptjqueryhtmlcss

The `appendTo` function in Ajax is used to swap out the current element

I have been working on sending form data to a Servlet using JQuery and then receiving the response from the same JQuery. Check out the code snippet below. <%-- Document : index Created on : Feb 23, 2015, 8:18:52 PM Author : Yohan --% ...

javascriptjqueryhtmlajax

Tips for ensuring proper function of bullets in glidejs

I am currently working on implementing glidejs as a slider for a website, but I am facing issues with the bullet navigation. The example on glidejs' website shows the bullets at the bottom of the slider (you can view it here: ). On my site, the bullet ...

javascripthtmlglidejs

Retrieving information from a database using PHP PDO to populate a dropdown list

On my HTML page, I have a form that allows users to insert data into the database. Some fields in the form require dropdown lists, and I want to populate these dropdowns with data from the database. Previously, I had hardcoded the dropdown options like th ...

phphtmlpdo

What is the method to create a resizable table column border rather than resizing the bottom corner border?

At the moment, we are able to resize the table border when we drag the corner. However, my goal is to enable resizing on the right side of the full border. https://i.sstatic.net/yFI24.png Below is the CSS code for resizing: th{ resize: horizontal; ove ...

javascripthtmlcsshtml-tableangular13