You can use the CSS :nth-of-type pseudo-class selector to create layouts that alternate position to change the way things like flexbox work in every other feature.
- [Instructor] Now that we've practiced…how to work with layouts pretty well…and work with different responsive versions,…we're going to combine some of these techniques…to do rotation that is actually going to be position-based.…This is going to be pretty cold.…What we want to do is actually rotate this phone…and we want to sort of rotate…every other phone a different way.…Let's show you how to do that.…That is actually quite simple with transformations…and what I'm going to do is up here in the feature section,…before feature-description, I'm going to put in…some commands for what happens with phones.…
The phones themselves are in this section…called feature-phone…and it's a sidebar in this section html.…That's what we're going to target.…We're going to say we want to target the feature-phone…and in here, we're going to go ahead and call a media query…because I'm not going to rotate the phones…unless we're at the bigger breakpoints.…I think at the small breakpoints,…you just really want the phones to be stacked like this…
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos
Skill Level Advanced
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. Getting Started
2. Headers and Footers
3. Featured Content
Next steps1m 6s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.