Как вывести прикрепленные изображения и изменять их порядок

Есть страница на которую выводятся прикрепленные изображения.
Для вывода я использую вот такой код (возможно он не верен, или я допускаю где-то ошибку):

<?php // параметры по умолчанию
$posts = get_posts( array(
	'numberposts' => 0,
	'post_parent' => "14",
	'orderby'     => 'date',
	'order'       => 'DESC',
	'include'     => array(),
	'exclude'     => array(),
	'meta_key'    => '',
	'meta_value'  =>'',
	'post_type'   => 'page',
		'suppress_filters' => true, // подавление работы фильтров изменения SQL запроса
	) );

foreach( $posts as $post ){
	setup_postdata($post);
	$attachment_image = get_children( array(
		'numberposts' => 1,
		'post_mime_type' => 'image',
		'post_parent' =>$post->ID ,
		'post_type' => 'attachment',
	) );
	$attachment_image = array_shift($attachment_image);
	$img = '<img src="' . wp_get_attachment_url( $attachment_image->ID ) . '" />';

		// $img_url = wp_get_attachment_image_url($post->ID, full);
	?>
	
	<div class="row mix portfolio_item <?php the_field('mixitup-filter'); ?>">
		<div class="col-sm-6 portfolio_pc <?php the_field('order_text_sm') ?>">
			<div class="portfolio_discription">
				<h2><?php the_title(); ?></h2>
				<?php the_excerpt(); ?>
				<a href="<?php the_permalink(); ?>">Смотреть весь проект</a>
			</div>
		</div>
		<div class="col-sm-6 portfolio_pc no-gutters <?php the_field('order_img_sm') ?>">
			<div class="portfolio_title_img">
				<?php echo $img; ?>
			</div>
		</div>

		<div class=" portfolio_mobile">
			<div class="panel">
				<div class="panel-wrapper">
					<div class="panel-overlay">
						<div class="panel-text">
							<div class="panel-title">
							<?php the_title(); ?>
							</div>
						</div>
						<img class="panel-gradient" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/375042/base-gradient.png" alt=""/>
						<img class="panel-vingette" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/375042/darken-gradient.png" alt=""/>
					</div>
					<div class="img_cont">
						<?php echo $img; ?>
					</div>
				</div>
			</div>
		</div>

</div>

Порядок вывода в редакторе не соответствует тому, как они отображаются на странице и повлиять на это можно только очередностью загрузки их на страницу, а хотелось бы чтобы можно было менять порядок через редактор. Это происходит из-за того что ссылка на изображение помещается в массив. Вывести их на страницу через the_content(); не вариант, так как каждое изображение выводится и форматируются индивидуально. Возможно есть какой либо еще вариант вывода изображений? Можно ли подобным образом вывести изображения не прикрепленные к странице?