Organize the Div elements in the form of a message

Here is the code I am working with:

https://jsfiddle.net/bdqgszv5/1/

This is the same code without jsfiddle:

<section id="aussteller" class="row separated">
                <div class="section-header text-center">
                    <h2>Aussteller</h2>
                    <h4>Unsere Aussteller informieren Sie über die neusten Innovationen</h4>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://allbrochures.net/wp-content/uploads/2015/04/ricoh-logo.jpg" alt="Ricoh">
                            </div>                              
                        </div>
                        <h3>Ricoh</h3>
                        <p>Zeigt uns im RICOH-truck die neusten Drucksysteme</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="aussteller">
                        <div class="aussteller-info">
                            <div class="aussteller-photo">
                                <img src="http://reonline.com/wp-content/uploads/2014/01/lexmark-logo-18863_640x480.jpg" style="width: 220px; height: 220px" alt="Lexmark">
                            </div>
                        </div>
                        <h3>Lexmark</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>
                </div>

... (continue with remaining code)

            </section>

I want to rearrange it like this:

https://i.stack.imgur.com/CBZbU.png

The end result should be responsive and maintain the order. How can I achieve this?

htmlcsstwitter-bootstrap

Answer №1

While my expertise lies in CSS foundation, the concept of using 12 as a base for grid layout remains consistent. Consider coding it with a grid width set to small 2 columns and leaving some empty space to align with your layout.

UPDATE: You also have the option to utilize the empty spaces as small 4 columns, or alternatively, apply a center class if feasible. Best of luck! :)

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

:last-child is effective, but :first-child is inefficient

I'm having trouble using CSS to hide the first .sku element within an aside that contains two of these elements. Strangely, the :last-child selector works just fine. Can anyone explain why this might be happening? Here's a link to the JSFiddle fo ...

csshtmlcss-selectors

Develop a time-sensitive store system using HTML and JavaScript that toggles between open and closed status based on set

I am looking to develop a time-based Open/Closed store using HTML and JavaScript. The concept is that on Fridays, the element with id="friday" should be displayed, otherwise, show the element with id="week". Additionally, if the time i ...

javascripthtml

Combining keyframe properties in a more efficient way using less code

While attempting to develop a LESS mixin for CSS3 keyframes, I encountered the typical way of chaining IDs and classes: #idOne, #idTwo, .classOne, .classTwo { ... } Nothing groundbreaking there. What I'm currently working on is crafting the foll ...

cssanimationlesscss-animations

Is it possible to refresh the webpage in Angular when the tab is clicked?

Can someone help me find a solution to reload an Angular app's page when the user selects the browser tab? I've been exploring using window.location.reload() for this purpose, but I need guidance on triggering it specifically when the tab is sel ...

cssangulartypescriptbrowserreload

Can you explain the purpose of using the "overlay" value in the "overflow" property?

Can someone please clarify the distinction between "overlay" and "auto" for me? Is the function of "overlay" similar to that of "auto"? ...

cssoverflow

Why is Chrome not enforcing the maximum attribute for input type number in HTML5?

I'm encountering an issue with the following code snippet: <input type="number" max="99" /> While using Google Chrome (and possibly other webkit browsers), it appears that the spinner's up arrow is restricted from going over 99. However, ...

formshtmlgoogle-chrome

Is the 3D cube spinning with a slight perspective glitch?

I've successfully created a spinning cube using html and css. However, I'm facing an issue where pressing the up and down arrow keys causes the cube to rotate in a larger space rather than around its center. I've attempted using margin: 0 a ...

htmlcss3d

Turn off the ability to drag on an HTML page

Need help with creating an HTML etch-a-sketch! I have a div container with multiple div elements inside it, all set up with CSS grid display. HTML structure: <div id="canvas"></div> To populate the canvas with div elements, I'v ...

javascripthtmlcss

Swap out the content in a text input box with the text chosen from a suggested autocomplete option

I am working on a text input box with auto-complete options displayed below it. I want to enable users to navigate through the options using keyboard arrows and "select" one, causing it to change color. How can I update the text in the input box with the s ...

javascripthtmljquerycss

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

I'm struggling with where to place this piece of code in my existing code. Should it be added to the header section? <head> <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" /> <title> ...

javascripthtmlsecuritymeta

Tips for invoking a function using ng-model together with the ng-model value

Within a div element, I have a text field where I am using ng-model to capture the value. I need to trigger a function for validation when a date is entered in the text field. How can I achieve this while still utilizing ng-model? Any suggestions on how to ...

javascripthtmlangularjsmeteorangularjs-ng-model

Exploring the concept of clip-path

Recently, I have been delving into the world of HTML and CSS, exploring clip-paths after stumbling upon them on this captivating website. My interpretation is that utilizing clip-paths, particularly with the polygon attribute, enables one to control which ...

htmlcss

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

javascriptjqueryhtml

Using an AngularJS directive to dynamically incorporate Bootstrap classes in the HTML elements

Our application is now incorporating reusable code by creating a simple directive to display content efficiently. Directive Code: angular.module("newsStore.moduleDirectives", []) .directive('renderAboutContent', ['aboutService', r ...

javascriptangularjstwitter-bootstrapangularjs-directive

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

I am working on a task to incorporate an if statement that checks for the existence of a specific property in a JSON file. If the property exists, I need to display its value within HTML tags <div class='titleHolder'> and "<div class=&ap ...

javascriptjqueryhtmlcssjson

Using HTML5 swipe.js with CSS3 transitions allows for smooth transitions between pages. Additionally, offscreen rendering and caching

I am currently developing an HTML5 magazine specifically designed for tablets and desktops utilizing swipe.js (). Everything is functioning smoothly, as I have arranged fullscreen list elements side by side on a single HTML page. The entire magazine is st ...

htmlrenderingcss-transitionsbrowser-cacheswipe

Setting the height of a child tag: A step-by-step guide

When trying to set the height of a child tag to 100%, I encountered an issue where the height would remain fixed after redirecting to another page, preventing the page from scrolling. Styling for Image 1 body{ background: url("Resources/Cash.jpeg&q ...

htmlreactjsheight

"Adjusting the Height of an MUI Autocomplete Input Field: A Simple Guide

I've been attempting to shrink the size of the Input field in MUI autocomplete but haven't had any luck. Here's the code I tried: styling: autocompleteStyle: { height: '2.3rem', color: `${theme.palette.grayDark1} !important ...

cssreactjsmaterial-uiautocomplete

Navigating within an ionic framework

I am facing an issue with a simple form in my application. When I try to enter user details, the Android keyboard hides the email field and mobile number field, making it impossible for me to scroll the page upwards. Can anyone suggest a solution? <i ...

htmlangularjscordovaionic-framework

Discover the best practices for integrating media queries using Radium within Material UI components

Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component. I attempted wrapping the button inside Radium import RaisedButton from 'materia ...

cssreactjsmaterial-uiradium