Расположение двух столбцов рядом друг с другом в конкретном сценарии

Question

Мне нужно соединить два кулона друг с другом, вместо того, чтобы они были под каждым. Я разделил пространство так, чтобы у них было достаточно места, чтобы быть рядом друг с другом. Я приложил картинку, чтобы вы могли увидеть мою идею. Объект B должен перейти в место, которое я пометил как новую позицию.

@model HomeIndexViewModel

@{
    ViewData["Title"] = "Home Page";

}

<div class="container">
    <p class="headerText">Most Recent Movies</p>
    <div class="row">
        <div class="col-lg-10 movieTitleText">
            @foreach (var movie in Model.Movies)
            {
                <div class="col-md-4 movieTitleText">
                    <div>
                        <img src="~/images/@movie.ImageUrl" alt="Visual Studio" class="img-fluid" style="width: 100%; height:100px;" />
                        <h4 class="">@movie.Name <span class="ratingInTitleToRight">☆@movie.Rating</span></h4>
                        <div class="genreTitleTag">@movie.Genre</div>
                        <div class="">@movie.Storyline</div>
                        <a asp-area="" asp-controller="Movie" asp-action="Watchlist" asp-route-id="@movie.Name" class="text-warning genreTitleTag">+ Add to Watchlist</a>
                    </div>
                    @*<partial name="_HomeMoviePartial" model="movie" />*@
                </div>
            }
        </div>
        <div class="col-lg-2">
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
        </div>
    </div>
</div>

https://i.imgur.com/Emtx7JW.png

Answer 1

Найден ответ, вам нужен еще один, потому что нужно поместить их в новые строки.

@model HomeIndexViewModel

@{
    ViewData["Title"] = "Home Page";

}

<div class="container">
    <p class="headerText">Most Recent Movies</p>
    <div class="row">
        <div class="col-lg-10 movieTitleText homeMovieList">
            <div class="row">
                @foreach (var movie in Model.Movies)
                {
                    <div class="col-lg-4 movieTitleText">
                        <div>
                            <img src="~/images/@movie.ImageUrl" alt="Visual Studio" class="img-fluid" style="width: 100%; height:100px;" />
                            <h4 class="">@movie.Name <span class="ratingInTitleToRight">☆@movie.Rating</span></h4>
                            <div class="genreTitleTag">@movie.Genre</div>
                            <div class="">@movie.Storyline</div>
                            <a asp-area="" asp-controller="Movie" asp-action="Watchlist" asp-route-id="@movie.Name" class="text-warning genreTitleTag">+ Add to Watchlist</a>
                        </div>
                        @*<partial name="_HomeMoviePartial" model="movie" />*@
                    </div>
                }
            </div>
        </div>
        <div class="col-lg-2">
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
        </div>
    </div>
</div>