画面縮小で横に均一に並んでいる画像3枚が縦に並び変わってしまう。HTML, CSS

###画面を縮小しても画像が縦に並び変わらないようにcssを設定したい
Webサイトを作っています。画像3枚を横に均一に並べているのですが、画面を縮小すると横から縦に並び変わってしまいます。これを画面を縮小しても横に並んでいる状態を崩さないようにしたい。

###html

<div class="plans" id="plans">
		 <div class="plans-info">
			
			<h3>カテゴリー</h3>
			<p></p>

			<div class="plans-grids">
				<div class="col-md-4 col-sm-4 plans-grid plans-grid-1">
					<figure class="effect-dexter">
						<img src=<%= asset_path "xxx.jpg"%> alt=""/>	
					</figure>
					<div class="t_on_image"><a href=""><h4>xxx</h4></a></div>
				</div>
				<div class="col-md-4 col-sm-4 plans-grid plans-grid-2">
					<figure class="effect-dexter">
						<img src=<%= asset_path "xxx.jpg"%> alt=""/>
					</figure>
					<div class="t_on_image"><a href=""><h4></h4></a></div>
				</div>
				<div class="col-md-4 col-sm-4 plans-grid plans-grid-3">
					<figure class="effect-dexter">
						<img src=<%= asset_path "xxx.jpg"%> alt=""/>
					</figure>
					<div class="t_on_image"><a href=""><h4>xxx</h4></a></div>
				</div>
			</div>
		</div>
	</div>

###css

.plans {
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	min-height: 300px;
	overflow: hidden;
}

.plans-info {
	width:1200px;
	margin: 0 auto;
	overflow: hidden;
}

.plans-info h3 {
	font-family: 'Oswald', sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	font-size:2.5em;
	margin-bottom:0px;
	color: black;
}

.plans-info p {
	font-family:'Oswald', sans-serif;
	margin-bottom: 15px;
	text-align: center!important;
	font-size:.9em;
	color:#777;
	margin-left: 290px;
	margin-right: 290px;
}

.plans-grid {
	overflow: hidden;
}

figure {
	position: relative;
	overflow: hidden;
	max-width: 1000px;
}

figure img {
	position: relative;
	max-height: 100%;
	background-color: #000;
	overflow: hidden;
}

###試したこと
min-width

###補足情報(言語/FW/ツール等のバージョンなど)
ruby on rails