How do I change the order of elements and control flow in responsive css


Tags: css,responsive-design,skeleton-css-boilerplate

Problem :

I'm using skeleton and here is the responsive layout that I want:

mobile layout - Title, Image, Description all in one column stack

desktop layout - The title and description to the right of the image

Mobile and Desktop Layouts

How should I structure the html and css so that the responsive layout can change from one to the other using css and media queries only? I tried floating the image to the left in the desktop layout and making the title a block element in the mobile layout:

<div class="container">
<span class="date">10/1/2012</span>
<span class="title">title</span>
<img class="thumbnail" src="http://www.placehold.it/300x200">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisl urna, posuere et tincidunt id, malesuada id libero. Sed vel neque tellus. Nulla et justo eu sapien accumsan eleifend eget id enim. Suspendisse sagittis, erat in mattis sagittis, dolor leo molestie nisi, eget cursus massa est at erat.
</p>
</div>​​​​​​​​​​​​​​

Mobile CSS

.title {
     display:block;
}

​.thumbnail {
}

.conatainer {
 width:320px;
}

Desktop CSS

​.title {
     position:relative;
}

​.thumbnail {
    float:left;
}

.conatainer {
 width:960px;
}

This seems to work for the most part except the description wraps below the photo surrounding it on the bottom of the photo if the text is long enough, instead of just keeping to the right column.

How should I do this if I am using skeleton or one of the responive grid systems, should I be using their column classes?



Solution :

You could set float: left also on .description paragraph on desktop.css stylesheet. This will make expand your paragraph in its own "column".

Then, remember to also apply a clearing to .container element


    CSS Howto..

    How to write this 'OR' CSS selector?

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    How to change the color of item selection radcombobox with a css style?

    How to create a header.php and footer.php with CSS files?

    How to create slideshow in css without having to make more than one class?

    How do I write a CSS for mouse hover [duplicate]

    how to make a floating div disappear for smaller screens?

    Selenium IDE: How to check text color using CSS

    how to make the osx-like border on css?

    Force browsers load CSS before showing the page

    how to add a permanent line on top of ios7 in phonegap

    how to not inherit? or how to reset inherited width to the value before? (css)

    Codeigniter shows views differently when index is removed

    How to specify multiple hover event targets in CSS?

    How do I get Slick carousel to work? [closed]

    How do I make this nested div to show up on top right corner and make text wrap around it?

    How to define `autocomplete=“off”` as a CSS style?

    How to get css and django working on live server

    How to vertically align inline-block divs without vertical spaces using CSS?

    How to change padding using php in options framework

    How to get highlighted words and wrap it in new element with data-attribute?

    Angular.js: How to change div width based on user input

    How to change position of Semantic UI sidebar for different screen sizes?

    How to set
  • Backgound color?
  • How can I get li items to slide and/or fade into view on this jQuery list?

    How to make IE respect max AND min-width [duplicate]

    How to include CSS in laravel 5 running with artisan?

    How do you put two divs next to each other so they fill up the available space

    Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

    ML - CSS How to align correctly a 'required' asterisk before la form label with the label text?