如何在asp.core MVC中将图像及其详细信息移到左侧？

Question

这是List.cshtml

@model BooksListViewModel

<h1>@Model.CurrentCategory</h1>
@foreach (var book in Model.Books)
{
<div class="col-sm-4 col-lg-4 col-md-4">
    <div class="thumbnail">
        <img src="@book.ImageThumbnailUrl"/>
        <div class="caption">
            <h3 class="pull-right">@book.Price.ToString("c")</h3>
            <h3>
                <a>@book.Name</a>
            </h3>
            <p>@book.ShortDescription</p>
        </div>
    </div>
</div>
}

这是site.css

body {
padding-top: 70px; 
background-image: url('/images/pattern.png');
background-repeat: repeat;
font-family: 'Times New Roman', sans-serif;
}

.slide-image {
width: 100%;
}

.caption {
height: 130px;
overflow: hidden;
}

.caption h4 {
    white-space: nowrap;
}

.thumbnail img {
width: 100%;
}

.thumbnail {
 padding:0;
 }

如何将图片中所示的书（“查找我”）与其他书一起移到左侧，以使它们彼此相邻。 [1]：https://i.stack.imgur.com/puwTL.png