Utilize CSS to prioritize the image and ensure it is responsive

Question

Utilize CSS to prioritize the image and ensure it is responsive

I'm utilizing the 'featurette' feature in bootstrap. Currently, the page displays text on the left and an image on the right. As you reduce the browser size, they stack on top of each other, with the text appearing above the image. How can I rearrange this layout so that the image comes first, followed by the text below?

For reference, you can see an example at http://getbootstrap.com/examples/carousel/

If you observe the featured section, you'll understand what I mean when resizing the window.

I've attempted adjusting the float position as a potential solution, but it didn't yield the desired outcome.

Just to clarify, I still want them to maintain their current positioning when the viewport is over 756px (or any designated size), but I specifically want the image to appear at the top when resizing as described in the previous scenario.

css image responsive

Answer 1

Answer №1

To create a dynamic layout, utilize the display:flex property within the container and adjust the order of elements using the order property. Experiment with changing the order to see how the layout adjusts.

.elements-container{
  background: #000;
  width: 100%;
  height: 500px;
  display: flex;
 }
.text-box{
  order: 2;
  width: 200px;
  height: 200px;
  color: #ffffff;
  background: #ff0000;
  display: block;
 }
.image-box{
  order: 1;
  width: 200px;
  height: 200px;
  display: block;
 }

<div class="elements-container">
  <div class="text-box">This is text</div>
  <div class="image-box"><img src="http://lorempixel.com/200/200" /></div>
</div>

Answer 2

To create a dynamic layout, utilize the display:flex property within the container and adjust the order of elements using the order property. Experiment with changing the order to see how the layout adjusts.

.elements-container{
  background: #000;
  width: 100%;
  height: 500px;
  display: flex;
 }
.text-box{
  order: 2;
  width: 200px;
  height: 200px;
  color: #ffffff;
  background: #ff0000;
  display: block;
 }
.image-box{
  order: 1;
  width: 200px;
  height: 200px;
  display: block;
 }

<div class="elements-container">
  <div class="text-box">This is text</div>
  <div class="image-box"><img src="http://lorempixel.com/200/200" /></div>
</div>

Utilize CSS to prioritize the image and ensure it is responsive

Answer №1

Similar questions

Top tips for seamless image transitions

Tips for designing resizable overlay divs

Unable to adjust the padding of a div while the Bootstrap 4 navbar is in a collapsed state on mobile devices

Tips for aligning two divs side by side: Ensure one of the divs is centered within the container that holds both divs

How to store a matplotlib plot as a PIL Image in Python

Instructions on adding a solid border color to a circular div using CSS

Trouble with Displaying 3rd Level JQuery Dropdown Menu

How to Make Bootstrap 3 Collapse Panels Stand Out with an Active Class

Getting the text value from a table in JavaScript is a straightforward process. By using

Displaying an iFrame with a height that excludes the header section

Table of Wordpress posts

Dynamic Material UI TextField underline width using JSX in React

What could be causing the variations in appearance of my HTML forms between Sharepoint and jsfiddle?

Center the background image at the halfway mark on the screen

Setting up the file structure for customizing Bootstrap with Sass

Bootstrap: Altering grid column layout for medium and small/extra-small screens

The visible overflow-x property is failing to display the excess content within the unordered list

Elevate a div over another div

How can I extract a substring from a URL and then save it to the clipboard?

Transform the appearance of a complex image by altering its color using CSS