Is it possible to rearrange the columns and right justify them for smaller mobile devices?

The html code I am working with is as follows:

<ol class="log">
  <li class="row">
    <p class="col-1 time">
      17:45
    </p>
    <div class="col-md-10">
      Here’s a comment
    </div>
    <p class="col-1 menu-column">
      <a href="#">Edit</a>
    </p>
  </li>

  ...

</ol>

This is the layout for desktop view:

https://i.sstatic.net/xRDwF.png

And this is how it looks on a small mobile device:

https://i.sstatic.net/oIp1r.png

I want to align the edit link next to the time for the mobile version so that it only occupies 2 rows (while keeping the original layout for larger screens). Is there a way to achieve this using CSS in Bootstrap 4?

cssbootstrap-4

Answer №1

Utilize the order-* classes to rearrange the columns. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<ol class="log">
  <li class="row">
    <p class="col order-0 col-md-1 time">
      17:45
    </p>
    <div class="col-12 order-2 order-md-1 col-md-10">
      This is a note
    </div>
    <p class="col order-md-2 col-md-1 menu-column text-right text-md-center">
      <a href="#">Edit</a>
    </p>
  </li>
</ol>

Answer №2

That's the reason why

<div class="col-md-10">

It will expand to full width at a display width of 992px Therefore, change it to <div class="col-xs-10"> or <div class="col-10"> so that it adjusts automatically to all display widths

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

Enable or disable a page item using ASP.NET and Bootstrap 4 pagination

I had initially used this code with Bootstrap 3, and it was functioning correctly. However, after transitioning to Bootstrap 4, I noticed that the active class was no longer being triggered when passing the page number inside the "for" loop. Does anyone h ...

c#asp.net-mvcpaginationbootstrap-4

Toggle Class Based on Scroll Movement

I am currently designing an HTML page that includes a small navigation bar located halfway down the page. I am aiming to have this navigation bar stick to the top of the page (become fixed) once it reaches the top. Here is the code I have tried: The scrip ...

javascriptjqueryhtmlcss

The submenus in the jQuery menu within the dialog box are not displaying as

My current setup includes a jquery menu with sub menus within a jquery dialog. You can see it in action here: http://jsfiddle.net/pnmpn25/VPXjs/17/ $("#menu").menu(); $("#dlg").dialog(); The issue I'm facing is that when I open a sub menu, it gets ...

jquerycssjquery-ui-dialogjquery-ui-menu

Incorporating both Tailwind CSS and Bootstrap in a Laravel project for a dynamic and stylish

Hey there! I've got a quick question for you. I'm currently working on my final year project and I was wondering if it would be okay to use both bootsrap and tailwind css together. I've used them separately before, but now I want to mix thin ...

laravelbootstrap-4tailwind-css

As you minimize the browser window, you may notice a white space appearing when scrolling over

Encountering an issue with my webpage where, upon minimizing the browser horizontally and causing overflow, scrolling over to view the hidden section results in a blank page. Any idea why this is happening? I have set my divs to a specific height (e.g. 9 ...

htmlcssstylesheet

What is preventing the textbox from resizing to the full div in IE? Everything looks good in Chrome

Having trouble with IE Resizing? The following code seems simple but it's causing issues: A div containing a text-box that should take up 100% of the DIV while still showing the red border. Unfortunately, setting height and width to 100% causes the bo ...

htmlcssinternet-explorer

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

javascriptjquerycsshighcharts

Having issues with integrating a basic Bootstrap carousel in Angular 8

I am currently using Angular 8 in conjunction with Bootstrap version 4.5 and a Font Awesome kit. The specific component I am working on is called font-project. However, I have encountered an issue when trying to slide images within the carousel. Although t ...

cssangularbootstrap-4slidercarousel

Is Knockout opposed to having an HTML tag nested inside another tag?

I am currently constructing a webpage using knockout 3.0. My goal is to implement a Bootstrap list with badges, as shown in the example and code below However, when I try to achieve this within the knockout template binding like so <script type="text/ ...

htmlcsstwitter-bootstrapwebknockout.js

Using inline SVG as a background in a select element with Firefox for custom styling

I've been working on creating a customized select tag with an inline SVG background using -webkit-appearance: none in my CSS. For reference, here is the JSFiddle link: http://jsfiddle.net/sucrenoir/yHR53/5/ select { font-size: 30px; border: ...

cssfirefoxsvgwebkit

I am facing an issue with my Bootstrap 4 Navbar as it is not collapsing in the Mobile View

The issue I am facing is that the navbar options cannot be opened properly. When clicked, it appears as a solid button and forms a sort of ring around it. I have attempted various solutions such as adding and removing scripts, changing the navbar attribute ...

htmljquerycssnavbarjquery-mobile-navbar

Troubleshooting CodePen Problem with Bootstrap 4

Experiencing an issue with CodePen and Bootstrap 4 where a simple button is not rendering, although the grid works perfectly: <button type="button" class="btn btn-primary">Primary</button> Any assistance would be greatly appreciated ...

bootstrap-4codepen

Full background cover

I have encountered a dilemma while constructing a website. The top image on the site does not expand to fill 100% of the screen size on mobile devices, leaving a blank bar visible. Despite my extensive research and troubleshooting efforts, I have been unab ...

htmlcssbackground

Animation of CSS height when image/icon is hovered over

Having an issue with my icon when hovering. I am trying to change the img src on hover. Here is the code I currently have: #aks { width: 0px; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: url("https://img. ...

htmlcsscss-animations

center the form vertically, similar to how you would with text

I am struggling to vertically align my form on my website. Can someone assist me with this issue? I want my form to be vertically aligned in the same way as my text on the website. How can I achieve this? Here is the code snippet I am currently using: ht ...

htmlcssvertical-alignment

Creating a personalized button using Bootstrap

Struggling to create a unique custom button in Twitter Bootstrap 3. I am trying to design a button with a triangle in the right bottom corner like this: https://i.sstatic.net/IZAv0.jpg I have considered using the background of the button and adding text, ...

csstwitter-bootstrap-3

Tips for repositioning the window when linking to a different section of a website

As a beginner in HTML and CSS, I am currently working on adding a navigation bar to my one-page website. I want the navigation bar to smoothly guide users to different sections of the page when they click on a link. To achieve this, I am using anchors and ...

htmlcsshyperlink

Updating code to insert elements into an array/data structure using Javascript

Hey everyone, I'm new to Javascript and I'm trying to make a change to some existing code. Instead of just returning the count of elements, I want to add each of the specified elements to an array or list. Here is the original code from a Seleni ...

javascriptpythoncssselenium

Eliminate the curved edges from the <select> tag

Is there a way to eliminate the rounded corners on a select element? I attempted using the code below, but it resulted in removing the arrows and cutting off the bottom of the placeholder text: select { -webkit-appearance: none; -webkit-border-radius ...

jquerycss

Dynamic grid arrangement showcasing cells of varying heights

I am dealing with a grid layout where cells are dynamically generated using the following code: <style> .calWrapper{ width:200px; float:left; } </style> <div class="container"> <?php for($i=1; $i<=12; $i++){ echo ...

htmlcssgrid-layout