Flex布局 实现元素排列 4列变2列？

电脑版显示为一行有四列.

手机版显示为一行两列

thinkphp 的 html

	<section class="nutshell"style="">
			<div class="grid">
				<div class="section-title center anim">{$typecont.enname}</div>
				<div class="items anim">
				<volist name="about" id='v' key="k" >
						<div class="item anim">
					<a href="{$v.url}"><figure class="center">
					<img src="{$v.pic}" alt="" /></figure></a>
				
				</div>
				</volist>
				</div>
		</section>
		

css

.nutshell .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    margin: 100px 0 0 0;
}

.nutshell .item {
    width: 280px;
    text-align: center;
}

@media only screen and (max-width: 768px){
.nutshell .items {
    ===flex-direction: column;/**这行注释掉,否则,手机上就是一行只显示一列了*/
    margin: 30px 0 0 0;
}

.nutshell .item {
		width: 100%;
		flex-basis: 49%;
		margin: 15px 0 0 0
	}
	
	}