I have a unique layout in my HTML code where items are displayed vertically on small devices. However, when the device size is medium, the items shift to a horizontal view using Bootstrap's 'col-md-6' class.
1 2
3 4
5 6
7 8
9
I am looking for a way to rearrange the items so that on medium screens they display like this:
1 6
2 7
3 8
4 9
5
And on larger screens like this:
1 4 7
2 5 8
3 6 9
Is there a CSS-only solution to achieve this layout without using JavaScript?
To achieve a multi-column layout in CSS, you can make use of the CSS property called columns, specifically utilizing column-count.
<div class="wrapper">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
/* Medium-sized devices (768px and up) */
@media (min-width: 768px) {
ul {
-webkit-column-count: 2; /* for Chrome, Safari, Opera */
-moz-column-count: 2; /* for Firefox */
column-count: 2;
padding: 0;
}
ul > li {
margin: 0 2rem; /* necessary to display bullets properly */
}
}
/* Large-sized devices (992px and up) */
@media (min-width: 992px) {
ul {
-webkit-column-count: 3; /* for Chrome, Safari, Opera */
-moz-column-count: 3; /* for Firefox */
column-count: 3;
}
}
Display on medium-sized devices: https://i.sstatic.net/ghmBC.png
View on large devices: https://i.sstatic.net/WJbk9.png
See it in action: http://jsfiddle.net/r74ctfy6/
If you're looking to organize your items using flexbox and have them wrap, make sure to set the height of the container explicitly. This way, you can control the number of elements that appear in each column.
For example, if you want 4 columns, each 20px high, you would need to adjust the height of the container to 80px.
ol {
height: 160px;
}
li {
height: 20px;
}
@media (min-width: 768px) {
ol {
height: 100px;
}
}
@media (min-width: 992px) {
ol {
height: 60px;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="d-flex flex-column flex-wrap">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>I'm having trouble displaying a textbox next to another div on my webpage. Instead of appearing next to the div, it is showing up below it. The textbox needs to have an absolute position. You can see the issue in action by checking out this demo. Than ...
Is there a way to include a separator image in my list using CSS? li { list-style: none; background-image: url("SlicingImage/button_unselect.png"); height: 53px; width: 180px; } This is the code for the separator image: url("SlicingImage ...
I am encountering an issue when trying to position #slider, where the navigation and elements above it also move. It seems as though they are contained within #slider, even though they are not. HTML: <div id="slider" class="clearfix"> <d ...
I'm having trouble aligning elements to the center when applying margin: 0 auto. You can view the code here: https://jsfiddle.net/helloworld123/vhhx1o7n/ The goal is to align the elements in the center of the page (.entry-wrap should be centered) and ...
I have an HTML5 video with a greenscreen effect that I want to display on a plane using a video texture in Three.js. I attempted to use separate video textures for the main video and the alpha channel, but encountered synchronization issues. From what I u ...
I am currently working on implementing a game that involves rolling dice in Javascript/jQuery. The game has different "Phases" that the player must complete one by one without any interference from previous phases. The goal is to smoothly transition betw ...
Is there a way to dynamically set a value into ns-click? For example: <td ng-click="{{schedule.action}}" ng-init="schedule.action=schedule.action" ng-repeat="schedule in room.Schedule">{{schedule.firstName}}</td> I encountered the following e ...
When my website loads, some of the fontawesome icons pop in after the animations finish. Specifically, two out of four icons used for visual representation of my skills (such as 'Sound Design' with a headphones picture) pop in when it gets to the ...
I have successfully implemented an image carousel using a combination of HTML and PHP. The functionality of the image carousel is as follows: This image carousel consists of two main components: the main image area and a thumbnail area with the id of "b ...
In our project, we utilized PrimeNG 5.2.x and Bootstrap 4.2.x. Unfortunately, we encountered an issue where the PrimeNG component was not being displayed correctly. However, upon removing the reference to bootstrap.min.css in the .angular-cli.json file, th ...
When trying to use the following checkbox in TypeScript, I encountered a warning: <input type="checkbox" onClick={(event: React.MouseEvent<HTMLInputElement>) => { setIsTOSAccepted(event.target.checked); }} defaultChecked={ ...
When it comes to adding responsive mixins in Bootstrap 4, where is the best place to place them? I've experimented with putting them in _custom.scss and mixins.scss, but unfortunately, they do not seem to work. I am utilizing the built-in mixins provi ...
Seeking guidance on changing the color of the last digits of a number if it ends in a zero or more. For instance, transform 0.50 to 0.50, 10.00 to 10.00, 10,000.00 to 10,000.00, 100,050.00 to 100,050.00, and the like. Any assistance in achieving this would ...
I recently discovered that the CSS I added is causing the preview of select options in my form to disappear. Despite searching online, I have been unable to find a solution to this issue. Here is the problematic CSS code: .form-control{ height: 50px; ...
Currently, I am utilizing angular-deckgrid for image display purposes. Within a container, there are two columns in which images are displayed with the column-1-2 class according to the documentation. However, in certain scenarios where only one image is p ...
Having some issues with jQuery.ajax() while trying to fetch an html code snippet from table_snippet.html and replacing the element in my html code. The error handler in jQuery.ajax() gets triggered instead of the expected success handler. <!DOCTYPE H ...
When you click the menu button, I want the text inside the class="greetings" div to change from "Welcome Jon deo" to just "G" So basically, whenever the menu button is clicked, display the letter G and hide or replace "Welcome Jon deo" Addition ...
Hey, I'm facing a situation where I have an HTML form and I need to pass its value as a parameter to a PHP function. However, there's another value that I need to include which is not even present inside the HTML code. Take this for example: &l ...
Encountering an issue where the data cannot be displayed and it's showing an error message of undefined variable: avg. Below is the script being used: The controller function: public function rate_config() { $rt = $_POST['hasil_rating&a ...
Regarding the query. I successfully displayed a base-64 encoded image on the client side. .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDk ...