bootstrap見本

スマホ用=col-数字 PC用col-md-数字

col-12 col-md-6
col-12 col-md-6
col-6 col-md-6
col-6 col-md-6
col-4 col-md-4
col-4 col-md-4
col-4 col-md-4
col-6 col-md-3
col-6 col-md-3
col-6 col-md-3
col-6 col-md-3
A
B
C
D
E
3列の1列目
.col-4
3列の2列目
.col-4
3列の3列目
.col-4

オンラインのスケールエディター
http://shoelace.io/

SPで1カラム / PCはそれぞれ

col-sm-12

col-sm-6
col-sm-6

col-sm-4
col-sm-4
col-sm-4

col-sm-3
col-sm-3
col-sm-3
col-sm-3

col-sm-2
col-sm-2
col-sm-2
col-sm-2
col-sm-2
col-sm-2

col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1

<div class="container">
    <div class="row">
        <div class="col-sm-12">col-sm-12</div>
    </div>
    <div class="row">
        <div class="col-sm-6">col-sm-6</div>
        <div class="col-sm-6">col-sm-6</div>
    </div>
    <div class="row">
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
        <div class="col-sm-4">col-sm-4</div>
    </div>
    <div class="row">
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
    </div>
    <div class="row">
        <div class="col-sm-2">col-sm-2</div>
        <div class="col-sm-2">col-sm-2</div>
        <div class="col-sm-2">col-sm-2</div>
        <div class="col-sm-2">col-sm-2</div>
        <div class="col-sm-2">col-sm-2</div>
        <div class="col-sm-2">col-sm-2</div>
    </div>
    <div class="row">
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
        <div class="col-sm-1">col-sm-1</div>
    </div>
</div>

SPで2カラム / PCはそれぞれ

col-sm-12

col-sm-6
col-sm-6

col-sm-4
col-sm-4
col-sm-4

col-sm-3
col-sm-3
col-sm-3
col-sm-3

col-sm-2
col-sm-2
col-sm-2
col-sm-2
col-sm-2
col-sm-2

col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1

<div class="container">
    <div class="row">
        <div class="col-sm-12">col-sm-12</div>
    </div>
    <div class="row">
			<div class="col-sm-6 col-xs-6">col-sm-6</div>
			<div class="col-sm-6 col-xs-6">col-sm-6</div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-xs-6">col-sm-4</div>
				<div class="col-sm-4 col-xs-6">col-sm-4</div>
				<div class="col-sm-4 col-xs-6">col-sm-4</div>
    </div>
    <div class="row">
        <div class="col-sm-3 col-xs-6">col-sm-3</div>
				<div class="col-sm-3 col-xs-6">col-sm-3</div>
				<div class="col-sm-3 col-xs-6">col-sm-3</div>
				<div class="col-sm-3 col-xs-6">col-sm-3</div>
    </div>
    <div class="row">
        <div class="col-sm-2 col-xs-6">col-sm-2</div>
				<div class="col-sm-2 col-xs-6">col-sm-2</div>
				<div class="col-sm-2 col-xs-6">col-sm-2</div>
				<div class="col-sm-2 col-xs-6">col-sm-2</div>
				<div class="col-sm-2 col-xs-6">col-sm-2</div>
				<div class="col-sm-2 col-xs-6">col-sm-2</div>
    </div>
    <div class="row">
        <div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
				<div class="col-sm-1 col-xs-6">col-sm-1</div>
    </div>
</div>