响应式卡片bootstrap4

Question

我在行内有两列， col-sm-9 col-xs-11我的主要 col-sm-3 col-xs-1 sidebar-offcanvas用于我的侧边栏。 在主栏内我有卡来显示我的帖子，但是当我将卡放在其他栏内以一排显示3个帖子时，我的分页按钮来到我的卡内并每行显示一张卡。

.card {
    float: right;
    width: 31%;
	margin: 5px 10px 10px 10px;
}
.card-img{
	height: 200px;
}
.card-title{
  font-size: 16px;
  text-align: right;
  margin-top: 10px;
  margin-right: 5px;
}
.card-title a{
  text-decoration: none;
  color: #343a40;
}
.card-author{
	color: #908E99;
	font-size: 11px;
	margin-right: 5px;
}
.card-author a{
	text-decoration: none;
}
.card-author a:hover{
	color: #343a40;
}
.card-date{
    color: #908E99;
	font-size: 11px;
	margin-right: 5px;
}
.card-date a{
	text-decoration: none;
}
.card-content{
    float: right;
    width: 100%;
    padding: 5px 10px 0;
    font-size: 14px;
    line-height: 2;
}
.readmore{
	float: right;

}
.readmore a{
	background: #343a40 none repeat scroll 0 0;
	color: #ffffff;
	border: 1px solid #1b1c20;
    border-radius: 3px;
	padding: 2px 10px;
	margin-right: 1px;
    text-decoration: none;
}

<div class="container-fluid">
     <div class="row my-row">
             <div class="col-sm-9 col-xs-11" id="main">
                    <div class="card">
                    <img class="card-img" src="admin/upload/<?php echo $result['image']; ?>"alt="Card image"/>
                     <div class="card-block">
                      <h4 class="card-title">
                      <a href="post.php?id=<?php echo $result['id']; ?>"><?php echo $result['title']; ?></a>
                    </h4> 
                                    <h6 class="card-author"> توسط : <a href="#"><?php echo $result['author']; ?></a>
                    </h6>
                    <h6 class="card-date"><?php echo $fm->formatDate($result['date']); ?></h6><br/>			 
                       <div class="card-text">
                         <?php echo $fm->textShorten($result['body'], 400); ?>
                                       </div>
                       <div class="card-footer">
                         <a href="post.php?id=<?php echo $result['id']; ?>">ادامه مطلب</a>
                       </div>								 
                     </div>			 
                           </div>