I'm facing cross browser layout issues using angular material v1.0.6.
I'm aiming at having a header, a footer, and two equally wide panes in between covering all available space. The left pane must be scrollable.
This is the basic layout:
<div layout="row" style="height:100%;">
<div layout="column" flex>
<header flex="nogrow">
<h1>HEADER</h1>
</header>
<section flex layout="row">
<div flex id="pane-one" layout="column">
<md-content flex>
<md-content layout-padding>
<p>I am the scrollable content.</p>
</md-content>
</md-content>
</div>
<div flex id="pane-two" layout="column">
</div>
</section>
<footer flex="nogrow">
<h2>FOOTER</h2>
</footer>
</div>
</div>
Now while everything works as expected in Chrome (48.0.2564), Firefox (44.0.2) does not make the left pane scrollable. It just gives it as much hight as it needs. Safari (9.0.2) behaves even differently still, but it's not that far of from Chrome.
I have prepared a little codepen to illustrate the problem:
http://codepen.io/creimers/pen/pyJGpm
Am I applying the angular material grid in a wrong way?
It seems to me that you need to replace the section with another md-content. I cannot really say why, but it yields the desired behavior.
I forked your codepen here: http://codepen.io/anon/pen/vGLgmR
I was having similar issues so I created a new project based on John Papa's HotTowel Angular.
https://github.com/aaronklaser/hottowel-materials
It's also worth noting that flex is still relatively young and not fully supported everywhere.
check this
<body ng-app="MyApp">
<header flex="nogrow" id="c1">
<h1>HEADER</h1>
</header>
<div flex id="scenario" layout="row" style="height:100%;">
<md-content flex=50 id="noscroll"><p>noscroll</p></md-content>
<md-content flex=50>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas numquam eaque reiciendis libero perspiciatis sint obcaecati ullam officiis aliquid maiores nemo, magnam, sequi blanditiis, corrupti saepe ratione. Non, eveniet, minus.</p>
</md-content>
</div>
<footer flex="nogrow" id="c3">
<div layout="row" layout-padding>
<h3>FOOTER</h3>
<md-button class="md-fab"></md-button>
</div>
</footer>
Related
I am making a blog Component with React.
By giving createContext to a separate blogData.jsx, the contents of data.JSON were brought as it is. (It was put in a variable)
Since the value of the "thumbnail" key is '/assets/post-img1.jpg' and in my Local it is '../../assets/post-img1.jpg', So I wrote the following in Post.jsx.
// Post.jsx
<img
className="postImg"
src={`../..${thumbnail}`}
alt=""
/>
<img src={`../..${profileImg}`} alt="" />
The results confirmed in Developer Tools Elements are as follows. Path is correct.
// in Developer Tools Elements
<img class="postImg" src="../../assets/post-img6.jpg" alt="">
<img src="../../assets/profile.jpg" alt="">
However, the image is not rendered and an alternate image(x box?) is displayed.
react-blog
├── package-lock.json
├── package.json
├── node_modules
├── public
│ ├── data.json
│ ├── index.html
│ └── reset.css
│
└── src
├── assets
│ ├── post-img1.jpg
│ └── ...
│
├── components
│ ├── banner
│ ├── footer
│ ├── post
│ ├── posts
│ ├── sidebar
│ ├── thumbnail
│ └── topbar
│
├── contexts
│ └── blogData.jsx
│
├── pages
├── App.jsx
└── index.js
blogData.jsx ↓
import { createContext } from 'react';
const blogData = createContext(
{
"blog": {
...
},
"posts": [
{
"id": 1,
"thumbnail": "/assets/post-img1.jpg",
"title": "Dipisicing elit. Inventore illum nostrum perferendis.",
"mainBg": "/assets/post-background1.jpg",
"category": ["Life", "style"],
"profileImg": "/assets/profile.jpg",
"contents": [
{
"type": "p",
"text": "Adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel."
},
{
"type": "img",
"src": "/assets/post-background1.jpg"
},
{
"type": "p",
"text": "Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore illum nostrum perferendis voluptas, voluptate soluta corrupti dolore quidem. Placeat, eaque! Exercitationem est facilis dolor quas odio cum incidunt repudiandae vel."
}
],
"userName": "Chilli",
"created": "2022.04.01"
},{...},{...},{...},{...},{...}
],
"users": [
{...},{...}
]
}
);
export default blogData;
Post.jsx ↓
import "./post.css";
export default function Post({data}) {
const {id, thumbnail, title, category, contents, profileImg, userName, created} = data;
return (
<div className="post">
<img
className="postImg"
src={`../..${thumbnail}`}
alt=""
/>
<div className="postInfo">
<dl className="postCats">
<dt className="hidden">Category</dt>
<dd className="postCat">
{category}
</dd>
</dl>
<h3 className="postTitle">
{title}
</h3>
<dl className="authorWrap">
<dt className="hidden">Author</dt>
<dd className="author">
<img src={`../..${profileImg}`} alt="" />
{userName}
</dd>
<dt className="hidden">post date</dt>
<dd className="postDate">
{created}
</dd>
</dl>
<p className="postDesc">
{contents[0].text}
</p>
</div>
</div>
);
}
Posts.jsx ↓
import React, { useContext } from "react";
import Post from "../post/Post";
import "./posts.css";
import blogData from "../../contexts/blogData";
export default function Posts() {
const { posts } = useContext(blogData);
const postArray = [];
for (let i = 0; i < posts.length; i++) {
postArray.push(<Post key={i+1} data={posts[i]} />);
}
console.log('postArray', postArray);
return (
<div className="posts">
{postArray.reverse()}
</div>
);
}
I have a text that has a lot of characters, and I need to limit what is displayed on screen to 20 chraracter only, what do I do?
Example: if I wish to display only 20 character of the following text, what should I do?
function App() {
return (
<>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
accusamus nostrum harum! Tenetur incidunt saepe explicabo rerum et
cumque architecto reiciendis, deleniti asperiores animi? Perspiciatis
vel nemo vitae nulla iure itaque iste pariatur aliquam unde quis magni,
quasi culpa in quisquam, sunt, corrupti ipsa! A sunt consectetur
aspernatur porro, exercitationem quasi, quibusdam mollitia numquam, aut
veniam voluptate? Esse, animi quibusdam voluptatem eligendi aliquam
minima nam impedit eum dignissimos praesentium, quae consequuntur,
deserunt neque? Tenetur, quae nihil. Sit, iure, itaque placeat beatae
distinctio nesciunt quisquam fugiat illo quod eius, architecto optio.
Rerum repudiandae perferendis vero laborum obcaecati vel aliquam quod
distinctio in id similique, quisquam odit accusantium quos veritatis
animi autem iste possimus, odio corrupti. Perferendis tenetur, non quis
animi rerum earum error sed officiis sint expedita et ipsum? Omnis nihil
non, tenetur veniam officiis repudiandae nobis, ab commodi inventore sed
maxime. In porro quo perspiciatis facilis. Maxime saepe, ipsa autem
eligendi cumque delectus provident vel aliquam fuga aut laborum facere
beatae repellendus, minus in quae exercitationem porro! Quod nesciunt
libero natus exercitationem beatae, accusamus maxime sint aliquam
voluptate aspernatur in dignissimos perferendis quo minima odio omnis,
officiis neque ullam, et commodi perspiciatis. Explicabo error ea
necessitatibus reprehenderit consequuntur inventore reiciendis!
</p>
</>
);
}
export default App;
You can use CSS using the ch unit I believe.
.Twenty_characters{
font-family: monospace;
width: 20ch;
overflow: hidden;
white-space: nowrap;
}
That being said I think you have to use a monospace font for this to work. Which might not be something you want to do.
the main situation is the next one: I want to use the current url as the param in order to find and use the props of that object. My issue... I wondering if this is the suppose method I should use, I willing to heard your ideas.
'''
class Lista extends React.Component {
constructor () {
super();
this.state = {
servicios : [{
servicio : 'Comerciales',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/comerciales',
id : 0
},
{
servicio : 'Eventos',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/eventos',
id : 1
},
{
servicio : 'Branding',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/branding',
id : 2
},
{
servicio : 'Tecnicos',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/tecnicos',
id : 3
},
{
servicio : 'Operacion con Dron',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/operacion-con-dron',
id : 4
}
]
}
}
render(props) {
return (
this.state.servicios.find((lista => lista.link == props.match.url) => (
<Servicio/>
))
)
}
}
'''
As expected the code itself is actually incomplete, and even I could made it showing the whole list but for some reason I now completely stuck with this problem. I will update if I achieve progress. cheers
You're right about using Array.prototype.find to find a matching service object if one exists.
You could spread the service object and pass it as props to the Servicio component if there's a match. And you have to access the props in a class component via this.props.
render() {
const service = this.state.servicios.find(
service => service.link === this.props.match.url
)
if (service) {
return <Servicio {...service} /> // this will pass `servicio`, `video`, `link`, `desscription`, and `id` as props
}
return <p>Not Found</p> // or whatever you want to return
}
You can use map method to iterate the array and use if condition to check props.match.url matches with link key in each object and return <Servicio/>
class Lista extends React.Component {
constructor () {
super();
this.state = {
servicios : [{
servicio : 'Comerciales',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/comerciales',
id : 0
},
{
servicio : 'Eventos',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/eventos',
id : 1
},
{
servicio : 'Branding',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/branding',
id : 2
},
{
servicio : 'Tecnicos',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/tecnicos',
id : 3
},
{
servicio : 'Operacion con Dron',
video : '',
descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
link : '/servicios/operacion-con-dron',
id : 4
}
]
}
}
render() {
return (
<>{this.state.servicios.map(lista =>{
if(lista.link == this.props.match.url) {
return (<Servicio/>);
}})
}
</>
)
}
}
help me please, I display the html markup of 6 posts, the first click works correctly, the second click I display the same posts. how should I add six new posts, and so every time I click?
I don't know what can be used instead of the slice method. demo https://jsfiddle.net/u9zc7p5v/13/
const content = mrd.map(function(data, elem) {
return `
<div class="blog__item">
<h2 class="blog__item-title">
${data.title}
</h2>
<input type="checkbox" class="read-more-state" id="post-${elem}" />
<p class="blog__item-text">
${data.body} <span class="blog__item-more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque ducimus unde harum vitae quam provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente odit laborum tempore sed quaerat a aliquam? Corrupti dolorum, tempora iste qui modi consectetur explicabo quia vel reiciendis nesciunt? Id!</span>
</p>
<label for="post-${elem}" class="blog__item-toggle" >Read More</label>
<div>${elem}</div>
</div>
`
}).slice(startNum, endNum).join('');
Increase the startNum value startNum+=6. then in slice function do startNum + endNum.
$(function(){
const blogs = document.querySelector('.blog__items')
const moreBtn = document.querySelector('.blog-btn')
let startNum = 0;
let endNum = 6;
async function getContent() {
let responce = await fetch('https://jsonplaceholder.typicode.com/posts');
let data = await responce.json();
return data;
}
$(moreBtn).on('click', async function(e) {
let mrd = await getContent();
console.log(mrd.length)
const content = mrd.map(function(data, elem) {
return `
<div class="blog__item">
<h2 class="blog__item-title">
${data.title}
</h2>
<p class="blog__item-text">
${data.body} <span class="blog__item-more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque ducimus unde harum vitae quam provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente odit laborum tempore sed quaerat a aliquam? Corrupti dolorum, tempora iste qui modi consectetur explicabo quia vel reiciendis nesciunt? Id!</span>
</p>
<label class="blog__item-toggle" >Read More</label>
<div>${elem}</div>
</div>
`
}).slice(startNum, startNum+endNum).join('');
console.log(startNum)
const el = $(content);
$(blogs).append(el)
el.on('click', function() {
});
startNum+= 6
});
});
I have 2 columns on my page... my issue is that I want the right column to stack underneath my left column if browser size is made smaller. I am using angular material but don't mind using custom styling to fix this. Any help will be appreciated.
HTML:
<div layout="row" layout-align="center center" flex>
<section layout="row">
<div id="nav" flex="20" layout="column" layout-align="space-around">
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
</div>
<div id="content" flex>
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
</div>
</section>
</div>
CSS:
.datepickerdemoBasicUsage md-content {
padding-bottom: 200px; }
.datepickerdemoBasicUsage .validation-messages {
font-size: 11px;
color: darkred;
margin: 10px 0 0 25px; }
.fixed-calendar {
width: 340px;
height: 340px;
display: block;
}
.fixed-calendar .md-calendar-scroll-mask {
width: 340px !important;
}
.fixed-calendar .md-virtual-repeat-scroller {
width: 340px !important;
height: 308px;
overflow: hidden !important;
}
JSFiddle Demo
Something like this on your parent layout="column" layout-gt-xs="row"
<div ng-app="sandbox">
<div>
<section layout="column" layout-gt-xs="row">
<div id="nav" flex>
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
</div>
<div id="content" flex>
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
</div>
</section>
</div>
</div>
This says stack child elements into a column.
Then if the browser width gets to greater than or equal xs (>= 600px), make child elements into a row.
Fiddle