The 'order' property in the bootsrap 4 grid is malfunctioning on Safari IOS and not producing the desired outcome

I have encountered an issue where this code performs perfectly on a Windows desktop, but when tested in Safari on iOS, the third column always collapses and jumps to a new line.

Here is the code snippet causing the problem:

<div class="container">
  <div class="row">
    <div class="col-4">
      First, but unordered
    </div>
    <div class="col-4 order-sm-4">
      Second in sm+, last in mobile
    </div>
    <div class="col-4 order-3">
      Last in sm+, Second in mobile
    </div>
  </div>
</div>

Has anyone else experienced this issue? Is it potentially a bug?

ioscsssafaribootstrap-4

Answer №1

Your order classes for Bootstrap seem to be incorrect. Remember, Bootstrap follows a mobile-first approach, so 'col-sm' actually refers to small screens and up (up to 'lg'). Here's a revised version of what you might want:

<div class="container">
  <div class="row">
    <div class="col-4">
      First item, but not ordered
    </div>
    <div class="col-4 order-3 order-sm-1">
      Second on small screens and above, last on mobile
    </div>
    <div class="col-4 order-2">
      Last on small screens and above, second on mobile
    </div>
  </div>
</div>

Let me know if there are any issues with this 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

Tips for changing the color of hyperlink text without underlining it on hover

I have a menu set up on my website that currently underlines when hovered over. However, I would like it to change color instead, which is the default style for my Wordpress theme. The title, "BOLI STYLUS," changes color exactly as I want it to. Below is ...

htmlcsswordpress-theming

What is the best way to switch the visibility of a div on click from another div?

My goal is to make a div toggle visible or hidden when another div is clicked. The only connection between the two divs is that they are both nested within the same parent div. There's a DIV element with the class of "comment" which contains a DIV ele ...

javascriptjqueryhtmlcss

How can you quickly generate a clear and legible JSON string?

How can I generate a formatted JSON string with new lines and tabs (or spaces)? Currently, the code snippet provided results in a single long line of text. let resultString = String(data: response.data, encoding: .utf8) Is there a built-in method to eas ...

iosjsonswiftswift4

How can I modify the font style in Bootstrap?

How can I integrate a custom open font into Bootstrap without using a CDN? Should I create a CSS rule to override Bootstrap's default font or locate the font files in Bootstrap and replace them with my desired font? ...

css

Increasing height for individual Bootstrap cards, without affecting all cards within the same row

I've encountered an issue where I need to increase the height of a single bootstrap card in a tile-module layout without affecting the height of any other cards in the same row. The code snippet below shows the HTML structure I currently have: <div ...

cssbootstrap-4

Picture mosaic, With one image matching the height of two or three others

I am curious about creating an image grid using bootstrap 4. I would like the height of my left-side image to match the height of the right-side images. <div class="container"> <div class="row"> <div class="col-md-6"> ...

bootstrap-4

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...

csswordpress

Changing the jQuery mobile side panel from push to overlay can be achieved by modifying the display settings when transitioning from a mobile view to a

I'm currently working on a project using jQuery Mobile (JQM) and jquery.mobile-1.4.5. My goal is to create a responsive side menu panel with a fixed header that works well on both mobile and tablet devices. For the design, I want the panel width to b ...

htmljquerycssjquery-mobileresponsive

Vertically align the text

Is there a way to center this text vertically within the divs? I've attempted adjusting the position using relative/absolute, and modifying the top and left properties of the paragraph, but none of these methods have been successful. div.roxo{ ...

htmlcssalignment

Using the CSS selector :contains() does not function properly when there are line breaks present

<div>A very lengthy text that goes on and on</div> When rendered, A very lengthy text that goes on and on will appear as HTML removes the line breaks. However, locating the div using the :contains() CSS selector is challenging due to the lin ...

jqueryhtmlcssjquery-selectors

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

I have developed a Flask application using HTML and external (static) CSS stylesheets. One interesting feature of the application is a checkbox that uses JavaScript to toggle between two different CSS stylesheets - one for light mode and one for dark mode. ...

pythoncssflaskjinja2

Differences in Changing Div Background Between Firefox and Chrome

My webpage has a div element that I want to be able to change the background color of by clicking on it. The background should either be transparent with no color, or a reddish/pinkish shade. I've written a javascript function to handle this function ...

javascriptjqueryhtmlcssgoogle-chrome

Trouble encountered in aligning two DIVs in a horizontal position

I have been through numerous discussions on the same problem, but none of the solutions seem to work in my case. I am currently working on a section of my website that has 3 small boxes, each containing an image on top and text below. The issue arises when ...

csshtml

Struggling to incorporate hidden and visible features using Django framework

One of my unique functionalities is that I contain a radio button in my form. If the user clicks "Yes," an error message will be displayed on the screen indicating that this is not the correct place to submit data, and suggesting that they visit another we ...

javascriptjquerycssdjangopython-3.x

Issues with audio and video playback intermittently occurring on Sencha Touch 2

As a beginner with Sencha Touch 2, I am currently working on uploading images onto an iPad using Xcode. My app has audio playing on the home screen, and I want the video to start playing and the audio to stop when a specific tab is selected. However, the ...

javascripthtmlcssextjs

Struggling to eliminate unwanted space with CSS styling

Despite my efforts with Google Chrome and inspecting elements, I've been unable to eliminate an irritating space. I also experimented with Firebug and attempted to modify properties in the header, headercontainer, etc. The screenshot showing the spa ...

htmlcss

Stop storing CSS data for nopCommerce

Currently, I am looking for a method to avoid caching CSS files on my nopCommerce website. In the past, I have achieved this by adding the date and another element at the end of the CSS call. Html.AppendCssFileParts("~/Themes/CustomTheme/Content/css/site. ...

htmlcssasp.netcachingnopcommerce

Hover-activated dropdown menu

After reading numerous tutorials and spending hours trying to create a submenu on hover, I still can't seem to get it to work. My goal is to display "Zimmer", "Reservierung", and "Preise" in a vertical menu when hovering over "Hotel," and so on. Here ...

htmlcssnavigationsubmenu

Having trouble with getting sound to work on the iPhone simulator in Xcode?

I am encountering an issue while trying to play a sound associated with a button. The error code I am receiving is causing me trouble. How can I resolve this problem? 2012-01-13 07:22:58.887 M3NYFAC3Z[5875:1e03] Error loading /System/Library/Extensions/ ...

iphoneiosxcodesimulatoravplayer

Remove the default CSS styling from Django CMS

When using Django CMS' text plug-in, I've noticed that the text is hardcoded with its own CSS, specifically within the p tags. Is there a way to remove this default styling? I would like for the text to inherit the styles defined in the theme I a ...

cssdjangodjango-cms